dataTables使用的详细说明整理

提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

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

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

二、基本使用：

1、dataTables的引入及初始化

<link rel="stylesheet" type="text/css" href="http://cdn.datatables.net/1.10.15/css/jquery.dataTables.css">
<script type="text/javascript" charset="utf8" src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script type="text/javascript" charset="utf8" src="http://cdn.datatables.net/1.10.15/js/jquery.dataTables.js"></script>

$(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文件

四、遇到的问题

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

解决方法：引入bootstrap的js、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"> 
<script type="text/javascript" charset="utf8" src="http://code.jquery.com/jquery-1.10.2.min.js"></script> 
<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;
}