本文共三个部分:官网|基本使用|遇到的问题

一、官方网站:http://www.datatables.club/

二、基本使用:

1、dataTables的引入及初始化

<!--第一步:引入Javascript / CSS (CDN)-->
<!-- DataTables CSS -->
<link rel="stylesheet" type="text/css" href="http://cdn.datatables.net/1.10.15/css/jquery.dataTables.css"> <!-- jQuery -->
<script type="text/javascript" charset="utf8" src="http://code.jquery.com/jquery-1.10.2.min.js"></script> <!-- DataTables -->
<script type="text/javascript" charset="utf8" src="http://cdn.datatables.net/1.10.15/js/jquery.dataTables.js"></script>

  

<!--第三步:初始化Datatables-->
$(document).ready( function () {
$('#example').DataTable();
} );

2、dataTables的基础属性配置

"bPaginate": true, //翻页功能
"bLengthChange": true, //改变每页显示数据数量
"bFilter": true, //过滤功能
"bSort": false, //排序功能
"bInfo": true,//页脚信息
"bAutoWidth": true//自动宽度

3、关于排序的四个属性区分

  • bSort : 初始化的时候可以定义整个表格是否需要进行排序

    $(document).ready( function () {
    $('#example').dataTable( {
    "bSort": false
    } );
    } );
  • aaSorting : 初始化的时候可以用来定义表格根据哪一列进行排序
    $(document).ready( function() {
    $('#example').dataTable( {//先对第二列降序排列,在对第四列升序排列
    "aaSorting": [[1,'desc'], [3,'asc']]
    } );
    } );
  • bSortable : 初始化的时候可以用来定义哪一列可以进行排序
    $(document).ready( function() {
    $('#example').dataTable( {
    "aoColumns": [
    { "bSortable": false },
    null,
    null,
    null,
    null
    ] } );
    } );
  • asSorting : 可以用来设置某一行的排序规则
    $(document).ready( function() {
    $('#example').dataTable( {
    "aoColumns": [
    null,
    { "asSorting": [ "asc" ] },
    { "asSorting": [ "desc", "asc", "asc" ] },
    { "asSorting": [ "desc" ] },
    null
    ]
    } );
    } );

4、展示一个表格的基本配置

$('#myTable').dataTable({
"bJQueryUI": true,//是否使用jquery中的ui theme
"bProcessing": true, //DataTables载入数据时,是否显示‘进度’提示
"bServerSide": false, //是否启动服务器端数据导入,也就是调用后台数据的时候
"bStateSave": true, //是否打开客户端状态记录功能,此功能在ajax刷新纪录的时候不会将个性化设定回复为初始化状态
"sPaginationType": "full_numbers",//详细分页组,可以支持直接跳转到某页
"bScrollInfinite": false, //是否启动初始化滚动条
"bScrollCollapse": false, //是否开启DataTables的高度自适应,当数据条数不够分页数据条数的时候,插件高度是否随数据条数而改变
"bPaginate": true, //翻页功能
"aLengthMenu": [5, 10, 15], //更改显示记录数选项
"iDisplayLength": 9, //默认显示的记录数
"sScrollY": 300,//规定表格高度,出现滚动条
"sScrollX": "50%",////是否开启水平滚动,以及指定滚动区域大小,可设值:'disabled','2000%'
"bLengthChange": true, //改变每页显示数据数量
"bFilter": true, //过滤功能
"bSort": false, //排序功能,初始化的时候定义整个表格是否进行排序
"bInfo": true,//页脚信息,即表格左下角显示多少条数据的提示
"bAutoWidth": true,//自动宽度,false为禁止自动计算列宽
// 'aaSorting': [[2, 'asc']],//bSort失效
"aaData": [
{
"Id": "001",
"Name": "ta",
"Salary": "320,800",
"Date": "2012-10-10",
"Office": "IJD",
"Show": "X"
},
{
"Id": "002",
"Name": "张三",
"Salary": "450,800",
"Date": "2012-3-19",
"Office": "DPD",
"Show": "X"
},
{
"Id": "003",
"Name": "李四",
"Salary": "120,800",
"Date": "2013-3-21",
"Office": "ICD",
"Show": "C"
},
{
"Id": "004",
"Name": "王五",
"Salary": "50,800",
"Date": "2011-11-11",
"Office": "ISD",
"Show": "X"
},
{
"Id": "005",
"Name": "张张",
"Salary": "780,800",
"Date": "2013-2-22",
"Office": "ADM",
"Show": "X"
},
{
"Id": "006",
"Name": "ni",
"Salary": "320,800",
"Date": "2012-10-10",
"Office": "IJD",
"Show": "X"
},
{
"Id": "007",
"Name": "张三",
"Salary": "450,800",
"Date": "2012-3-19",
"Office": "DPD",
"Show": "X"
},
{
"Id": "008",
"Name": "李四",
"Salary": "120,800",
"Date": "2013-3-21",
"Office": "ICD",
"Show": "C"
},
{
"Id": "009",
"Name": "王五",
"Salary": "50,800",
"Date": "2011-11-11",
"Office": "ISD",
"Show": "X"
},
{
"Id": "010",
"Name": "张张",
"Salary": "780,800",
"Date": "2013-2-22",
"Office": "ADM",
"Show": "X"
},
{
"Id": "011",
"Name": "wo",
"Salary": "320,800",
"Date": "2012-10-10",
"Office": "IJD",
"Show": "X"
},
{
"Id": "012",
"Name": "张三",
"Salary": "450,800",
"Date": "2012-3-19",
"Office": "DPD",
"Show": "X"
},
{
"Id": "013",
"Name": "李四",
"Salary": "120,800",
"Date": "2013-3-21",
"Office": "ICD",
"Show": "C"
},
{
"Id": "014",
"Name": "王五",
"Salary": "50,800",
"Date": "2011-11-11",
"Office": "ISD",
"Show": "X"
},
{
"Id": "015",
"Name": "",
"Salary": "780,800",
"Date": "2013-2-22",
"Office": "ADM",
"Show": "X"
}
],
"aoColumns": [//sClass设置列的class属性值,bSearchable设置列的数据是否过滤,bVisible设置列是否显示,sTitle设置列的标题
{
"data": "Id", 'sTitle': 'Id', 'sWidth': '100px', 'sClass': 'center', "bVisible": false, },
{
"data": "Name", 'sTitle': '姓名', 'sWidth': '20%', 'sClass': 'center', "sDefaultContent": "", //此列默认值为"",以防数据中没有此值,DataTables加载数据的时候报错
},
{ "data": "Salary", 'sTitle': '工资', 'sWidth': '20%', 'sClass': 'center' },
{ "data": "Date", 'sTitle': '入职日期', 'sWidth': '20%', 'sClass': 'center' },
{
"data": "Office", 'sTitle': '所属部门', 'sWidth': '20%', 'sClass': 'center'
},
{
"data": "Show", 'sTitle': '是否显示ID', 'sWidth': '20%', 'sClass': 'center', "bSearchable": false,
"mRender": function (data, type, full) {//data表示该列的数据
// return '<input type="text" class="userName" value="' + full + '"/>';
if (data === 'X') {
return '不显示'
} else {
return '显示'
}
}
}
],
"oLanguage": {//国际化配置
"sProcessing": "正在加载中......",
"sLengthMenu": "每页显示 _MENU_ 条记录",
"sZeroRecords": "对不起,查询不到相关数据!",
"sEmptyTable": "表中无数据存在!",
"sInfo": "当前显示 _START_ 到 _END_ 条,共 _TOTAL_ 条记录",
"sInfoFiltered": "数据表中共为 _MAX_ 条记录",
"sSearch": "搜索",
"oPaginate": {
"sFirst": "首页",
"sPrevious": "上一页",
"sNext": "下一页",
"sLast": "末页"
}
}
});

5、使用Ajax与后台交互数据时,将bServerSide属性置为true,涉及属性fnServerData

"sAjaxSource": "url",//接口路径
"fnServerData": function (sUrl, aoData, fnCallback) {
$.ajax({
"url": sUrl,
"type": 'POST',
"dataType": 'json',
"contentType": "application/x-www-form-urlencoded; charset=utf-8",
"cache": false,
"data": aoData,
"success": (res) => {
//console.log(res.data.data)
fnCallback(res.data.data)
}
})
}

三、实例展示

1、引入文件

2、创建js文件

    var iDisplayStart = ;
var iDisplayLength = ; $('#tableList').dataTable({
"bJQueryUI": true,//是否使用jquery中的ui theme
"bProcessing": true, //DataTables载入数据时,是否显示‘进度’提示
"bServerSide": true, //是否启动服务器端数据导入,也就是调用后台数据的时候
"bStateSave": false, //是否打开客户端状态记录功能,此功能在ajax刷新纪录的时候不会将个性化设定回复为初始化状态
"sPaginationType": "full_numbers",//详细分页组,可以支持直接跳转到某页
"bScrollInfinite": false, //是否启动初始化滚动条
"bScrollCollapse": false, //是否开启DataTables的高度自适应,当数据条数不够分页数据条数的时候,插件高度是否随数据条数而改变
"bPaginate": true, //翻页功能
// "aLengthMenu": [5, 10, 15], //更改显示记录数选项
// "iDisplayLength": 9, //默认显示的记录数
// "sScrollY": 100,//规定表格高度,出现滚动条
// "sScrollX": "50%",////是否开启水平滚动,以及指定滚动区域大小,可设值:'disabled','2000%'
// "bLengthChange": true, //改变每页显示数据数量
"bFilter": false, //过滤功能
"bSort": false, //排序功能,初始化的时候定义整个表格是否进行排序
"bInfo": false,//页脚信息,即表格左下角显示多少条数据的提示
"bAutoWidth": true,//自动宽度,false为禁止自动计算列宽
// 'aaSorting': [[2, 'asc']],//bSort失效
"iDisplayStart": iDisplayStart,
"iDisplayLength": iDisplayLength,//默认显示的记录数
// "aaData": [
// {
// }
// ],
"columns": [//sClass设置列的class属性值,bSearchable设置列的数据是否过滤,bVisible设置列是否显示,sTitle设置列的标题
// {bVisible表示不再表格中显示
// "data": "caseId", 'sTitle': '序号', 'sWidth': '8%', 'sClass': 'center', "bVisible": false, "bSortable": false, "bUseRendered": false
// },
{
"data": "caseId", 'sTitle': '序号', 'sWidth': '2%', 'sClass': 'text-center', "bSortable": false, "bUseRendered": false
},
{
"data": "caseName", 'sTitle': '案件名称', 'sWidth': '20%', 'sClass': 'text-center', "sDefaultContent": "", "bSortable": false, "bUseRendered": false //此列默认值为"",以防数据中没有此值,DataTables加载数据的时候报错
},
{
"data": "caseCode", 'sTitle': '序号', 'sWidth': '14%', 'sClass': 'text-center', "bSortable": false, "bUseRendered": false
},
{
"data": "caseCauseName", 'sTitle': '原因', 'sWidth': '8%', 'sClass': 'text-center', "bSortable": false, "bUseRendered": false
},
{
"data": "underTakerName", 'sTitle': '收押人', 'sWidth': '8%', 'sClass': 'text-center', "bSortable": false, "bUseRendered": false
},
{
"data": "managerName", 'sTitle': '管理人员', 'sWidth': '8%', 'sClass': 'text-center', "bSortable": false, "bUseRendered": false
},
{
"data": "registerDate", 'sTitle': '日期', 'sWidth': '8%', 'sClass': 'text-center', "bSortable": false, "bUseRendered": false
},
{//自定义列
"mDataProp": "userType",
'sTitle': '登录用户角色',
'sWidth': '10%',
'sClass': 'text-center',
// "fnRender": function (oObj) {
// if (oObj.aData.userType == '1' || oObj.aData.userType == '3') {
// return '用户'
// } else {
// return '管理员'
// }
// },
"bSortable": false,
"bUseRendered": false
},
{
"sDefaultContent": "",
'sTitle': '操作',
'sWidth': '7%',
'sClass': 'text-center',
"render": function (data, type, full) { // 返回自定义内容
return "<span id='factorConfirm' style='display:inline-block;color:#01d1b8;text-decoration:underline;padding-bottom:3px;cursor:pointer'>跳转按钮</span>";
}
}
],
"fnRowCallback": function (nRow, aData, iDisplayIndex) {//格式化数据
//iDisplayIndex指当前行的序号 每行加载完成,将当前列进行替换
if (aData.userType == '' || aData.userType == '') {
$('td:eq(7)', nRow).html('用户');
} else {
$('td:eq(7)', nRow).html('管理员');
}
return nRow;
},
"oLanguage": {//国际化配置
"sProcessing": "正在加载中......",
"sLengthMenu": "每页显示 _MENU_ 条记录",
"sZeroRecords": "对不起,查询不到相关数据!",
"sEmptyTable": "表中无数据存在!",
"sInfo": "当前显示 _START_ 到 _END_ 条,共 _TOTAL_ 条记录",
"sInfoFiltered": "数据表中共为 _MAX_ 条记录",
"sSearch": "搜索",
"oPaginate": {
"sFirst": "首页",
"sPrevious": "上一页",
"sNext": "下一页",
"sLast": "末页"
}
},
"sAjaxSource": requestUrl,//接口路径
"fnServerData": function (sUrl, aoData, fnCallback) {
$.ajax({
"url": sUrl,
"type": 'GET',
"dataType": 'json',
"dataSrc": '',
"contentType": "application/x-www-form-urlencoded; charset=utf-8",
"cache": false,
"data": aoData,
"sDom": "frtlip",
"sPaginationType": "full_numbers",
"success": (res) => { //处理返回的数据
fnCallback(handleData(res)); //处理返回的数据 // 点击跳转按钮
$("#factorConfirm").on('click', function (e) {
//获取本行数据(对象)
var currentData = $('#tableList').DataTable().row($(this).parents('tr')).data();
window.location.href = window.location.origin + '/html/ceshi.html?name=' + name + "&age=" + age
});
},
"error": function (xhr, error, thrown) {
top.showInfoWinError("发生异常:" + error);
}
})
}
});
function handleData(json) { // 处理返回的数据
var obj = { code: };
obj.iTotalDisplayRecords = obj.iTotalRecords = json.body.data.length;
obj.aaData = json.body.data;
return obj;
}

四、遇到的问题

1、设置列属性'sClass': 'text-center',每列的内容无法居中,样式失效

  • 解决方法:引入bootstrap的js、css

    <!-- DataTables CSS -->
    <link rel="stylesheet" type="text/css" href="http://cdn.datatables.net/1.10.15/css/jquery.dataTables.css">
    <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css"
    integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> <!-- jQuery -->
    <script type="text/javascript" charset="utf8" src="http://code.jquery.com/jquery-1.10.2.min.js"></script> <!-- DataTables -->
    <script type="text/javascript" charset="utf8"
    src="http://cdn.datatables.net/1.10.15/js/jquery.dataTables.js"></script>
    <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"
    integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa"
    crossorigin="anonymous"></script>

2、与后台交互的时候,设置了   iDisplayLength  属性为6,属性失效

  • 解决方法:

    设置翻页属性为true,否则不起作用
    "bPaginate": true, //翻页功能

3、当后台数据返回数值型1、2等数字,需要在表格内进行格式化内容

  • 解决方法:

    设置与columns属性同级的fnRowCallback属性进行列内容格式化
    
    "fnRowCallback": function (nRow, aData, iDisplayIndex) {//格式化数据
    //iDisplayIndex指当前行的序号 每行加载完成,将当前列进行替换
    if (aData.userType == '' || aData.userType == '') {
    $('td:eq(7)', nRow).html('用户');
    } else {
    $('td:eq(7)', nRow).html('管理员');
    }
    return nRow;
    }

4、需要在每行一列操作列、即后台没有返回该属性,我们需要自定义列

  • 解决方法

    {
    "sDefaultContent": "",//不是data属性
    'sTitle': '操作',
    'sWidth': '7%',
    'sClass': 'text-center',
    "render": function (data, type, full) { // 返回自定义内容
    return "<span id='factorConfirm' style='display:inline-block;color:#01d1b8;text-decoration:underline;
       padding-bottom:3px;cursor:pointer'>要素确认</span>";
    }
    }

5、后台返回数据后,如何处理才能显示到表格中

  • 解决方法

    function handleData(json) { // 处理返回的数据
    var obj = { code: };
    obj.iTotalDisplayRecords = obj.iTotalRecords = json.body.data.length;
    obj.aaData = json.body.data;
    return obj;
    } //success成功后,调用函数
    fnCallback(handleData(res))

6、原生JS中,通过url传值,解析参数

  • 解决方法

    function parseURL(url) {
    var url = url.split("?")[];
    var para = url.split("&");
    var len = para.length;
    var res = {};
    var arr = [];
    for (var i = ; i < len; i++) {
    arr = para[i].split("=");
    res[arr[]] = arr[];
    }
    return res;
    }

dataTables使用的详细说明整理的更多相关文章

  1. $_SERVER的详细参数整理下

    PHP编程中经常需要用到一些服务器的一些资料,特把$_SERVER的详细参数整理下,方便以后使用. $_SERVER['PHP_SELF'] #当前正在执行 脚本的文件名,与 document roo ...

  2. dataTables-使用详细说明整理

    本文共四部分:官网 | 基本使用|遇到的问题|属性表 一:官方网站:[http://www.datatables.net/] 二:基本使用:[http://www.guoxk.com/node/jqu ...

  3. [转]dataTables-使用详细说明整理

    本文转自:http://blog.csdn.net/mickey_miki/article/details/8240477 本文共四部分:官网 | 基本使用|遇到的问题|属性表 一:官方网站:[htt ...

  4. Linux系统管理图文详解超详细精心整理

    前言:带你遨游于linux系统管理知识的海洋,沐浴春日里的阳光,循序渐进,看完之后收获满满. 本次讲解基于linux(centos6.5)虚拟机做的测试,centos7估计以后有时间再更新啊. lin ...

  5. SSH框架搭建详细步骤整理

    学习Java面前有两座山,一座山叫SSM,一座山叫SSH,跨越了这两座山之后才能感受到这个语言的魅力所在,SSM框架的搭建详细在之前博客已经涉及了,今天来整理SSH框架详细步骤: 生有涯 而 学无涯 ...

  6. MySQL安装详细图解整理

    MySQL安装详细图解 2018-08-19  08:32:33 一.MYSQL的安装 1.打开下载的mysql安装文件mysql-5.0.27-win64.zip,双击解压缩,运行“setup.ex ...

  7. JavaScripts 基础详细笔记整理

    一.JS简介 JavaScript 是 Web 的编程语言,浏览器内置了JavaScript语言的解释器,所以在浏览器上按照JavaScript语言的规则编写相应代码之,浏览器可以解释并做出相应的处理 ...

  8. Redis集群搭建详细过程整理备忘

    三.安装配置 1.环境 使用2台centos服务器,每台机器上部署3个实例,集群为三个主节点与三个从节点: 192.168.5.144:6380 192.168.5.144:6381 192.168. ...

  9. [转] 详细整理:UITableView优化技巧

      原文:http://www.cocoachina.com/ios/20150602/11968.html   最近在微博上看到一个很好的开源项目VVeboTableViewDemo,是关于如何优化 ...

随机推荐

  1. 一、left

    一.left - right 就是遍历(以左边遍历,以右边遍历) inner join 就是求公共部分的结果集 left join 查询结果 right join结果 inner join 解决的办法 ...

  2. padding溢出

    一.padding溢出 参考代码: <!DOCTYPE html> <html lang="en"> <head> <meta chars ...

  3. codeforces 57 C Array(简单排列组合)

    C. Array time limit per test 2 seconds memory limit per test 256 megabytes input standard input outp ...

  4. 1121. Damn Single (25)

    "Damn Single (单身狗)" is the Chinese nickname for someone who is being single. You are suppo ...

  5. Eclipse开发工具的编码问题

    乱码:文件有一个编码,打开文件的工具(Eclipse或者浏览器)有一个编码,当两个编码不同就会出现编码异常或乱码. 参考: Eclipse修改编码格式 背景:在Eclipse的开发使用中,我们经常使用 ...

  6. 【ARC101F】Robots and Exits 树状数组优化DP

    ARC101F Robots and Exits 树状数组 有 $ n $ 个机器人和 $ m $ 个出口.这 $ n $ 个机器人的初始位置是 $ a_1,a_2.....a_n $ ,这 $ m ...

  7. Django【第18篇】:Django之缓存

    Django 之缓存 一.缓存 由于Django是动态网站,所有每次请求均会去数据进行相应的操作,当程序访问量大时,耗时必然会更加明显,最简单解决方式是使用:缓存,缓存将一个某个views的返回值保存 ...

  8. Redis---系统学习

    1.安装Redis Docker 2.查看Redis配置 进入Docker中的Redis容器: 进入启动命令目录:cd /usr/local/bin/ 启动redis客户端:./redis-cli c ...

  9. 【SaltStack官方版】—— job management

    JOB MANAGEMENT New in version 0.9.7. Since Salt executes jobs running on many systems, Salt needs to ...

  10. CSS盒子模型与怪异盒模型

             盒子模型(Box Modle)可以用来对元素进行布局,包括内边距,边框,外边距,和实际内容这几个部分. 盒子模型分为两种 第一种是W3c标准的盒子模型(标准盒模型) .第二种IE标准 ...