分页排序插件|dataTables

dataTables是一个jQuery插件,功能很强大,可以进行分页,检索,排序等功能。

1.官方下载最新版本

https://www.datatables.net/

2.默认配置

$(document).ready(function(){
$('#myTable').DataTable();
});

3.基本配置参数说明

 

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

 

datatables

4.设置默认排序

"aaSorting": [
[ 4, "desc" ]
],

列数从0开始,以第四列倒序排列。

5.制定某列不可进行排序

"aoColumnDefs": [ { "bSortable": false, "aTargets": [ 0 ,2,4] }]

第0列,第2列,第4列不能进行排序。

6.排序控制

"aoColumns": [
null,
{ "asSorting": [ "asc" ] },
{ "asSorting": [ "desc", "asc", "asc" ] },
]

第0列默认排序;第1列点击正序排序,第2列点击倒序,再次点击正序,再次点击正序。

7.读取语言包

"oLanguage": {
"sUrl": "cn.txt"
}

8.改变语言

oLanguage": {
"sLengthMenu": "每页显示 _MENU_ 条记录",
"sZeroRecords": "抱歉, 没有找到",
"sInfo": "从 _START_ 到 _END_ /共 _TOTAL_ 条数据",
"sInfoEmpty": "没有数据",
"sInfoFiltered": "(从 _MAX_ 条数据中检索)",
"oPaginate": {
"sFirst": "首页",
"sPrevious": "前一页",
"sNext": "后一页",
"sLast": "尾页"
},
"sZeroRecords": "没有检索到数据",
"sProcessing": "<img src='./loading.gif' />"
}

9.显示分页样式

sPaginationType: "full_numbers",//分页风格""full_numbers"" or ""two_button"", default ""two_button""

 

10.控制每列显示数量

"aLengthMenu": [[10, 25, 50, -1], [10, 25, 50, "All"]]

"iDisplayLength":10,