jQuery.datatables.js插件用法及api实例详解


1、DataTables的默认配置

1
2
3
$(document).ready(function() {
$(‘#example').dataTable();
} );

2、DataTables的一些基础属性配置

1
2
3
4
5
6
“bPaginate”: true, //翻页功能
“bLengthChange”: true, //改变每页显示数据数量
“bFilter”: true, //过滤功能
“bSort”: false, //排序功能
“bInfo”: true,//页脚信息
toWidth”: true//自动宽度

在这里插入图片描述

3、数据排序

1
2
3
4
5
6
7
8
9
$(document).ready(function() {
$(‘#example').dataTable( {
“aaSorting”: [
[ 4, "desc" ]
]
} );
} );

从第0列开始，以第4列倒序排列

4、隐藏某些列

1
2
3
4
5
6
7
$(document).ready(function() {
$(‘#example').dataTable( {
“aoColumnDefs”: [
{ "bSearchable": false, "bVisible": false, "aTargets": [ 2 ] },
{ “bVisible”: false, “aTargets”: [ 3 ] }
] } );
} );

5、改变页面上元素的位置

1
2
3
4
5
6
7
8
9
10
11
12
13
14
$(document).ready(function() {
$(‘#example').dataTable( {
“sDom”: ‘<”top”fli>rt<”bottom”p><”clear”>'
} );
} );
//l- 每页显示数量
//f – 过滤输入
//t – 表单Table
//i – 信息
//p – 翻页
//r – pRocessing
//< and > – div elements
//<”class” and > – div with a class
//Examples: <”wrapper”flipt>, <lf<t>ip>

6、状态保存，使用了翻页或者改变了每页显示数据数量，会保存在cookie中，下回访问时会显示上一次关闭页面时的内容。

1
2
3
4
5
$(document).ready(function() {
$(‘#example').dataTable( {
“bStateSave”: true
} );
} );

7、显示数字的翻页样式

1
2
3
4
5
$(document).ready(function() {
$(‘#example').dataTable( {
“sPaginationType”: “full_numbers”
} );
} );

8、水平限制宽度

1
2
3
4
5
6
7
$(document).ready(function() {
$(‘#example').dataTable( {
“sScrollX”: “100%”,
“sScrollXInner”: “110%”,
“bScrollCollapse”: true
} );
} );

9、改变语言

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
$(document).ready(function() {
$(‘#example’).dataTable( {
“oLanguage”: {
“sLengthMenu”: “每页显示 _MENU_ 条记录”,
“sZeroRecords”: “抱歉， 没有找到”,
“sInfo”: “从 _START_ 到 _END_ /共 _TOTAL_ 条数据”,
“sInfoEmpty”: “没有数据”,
“sInfoFiltered”: “(从 _MAX_ 条数据中检索)”,
“oPaginate”: {
“sFirst”: “首页”,
“sPrevious”: “前一页”,
“sNext”: “后一页”,
“sLast”: “尾页”
},
“sZeroRecords”: “没有检索到数据”,
“sProcessing”: “<img src=\'#\'" /loading.gif’ />”
}
} );
} );

10、定义每页显示数据数量

1
2
3
4
5
$(document).ready(function() {
$(‘#example’).dataTable( {
“aLengthMenu”: [[10, 25, 50, -1], [10, 25, 50, "All"]]
} );
} );

11、排序控制

1
2
3
4
5
6
7
8
9
10
11
$(document).ready(function() {
$(‘#example’).dataTable( {
“aoColumns”: [
null,
{ "asSorting": [ "asc" ] },
{ “asSorting”: [ "desc", "asc", "asc" ] },
{ “asSorting”: [ ] },
{ “asSorting”: [ ] }
]
} );
} );

12、从配置文件中读取语言包

1
2
3
4
5
6
7
$(document).ready(function() {
$(‘#example’).dataTable( {
“oLanguage”: {
“sUrl”: “cn.txt”
}
} );
} );

13. 是用ajax源

1
2
3
4
5
6
$(document).ready(function() {
$(‘#example’).dataTable( {
“bProcessing”: true,
“sAjaxSource”: ‘./arrays.txt’
} );
} );

14、使用ajax，在服务器端整理数据

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
$(document).ready(function() {
$(‘#example’).dataTable( {
“bProcessing”: true,
“bServerSide”: true,
“sPaginationType”: “full_numbers”,
“sAjaxSource”: “./server_processing.php”,
/*如果加上下面这段内容，则使用post方式传递数据
“fnServerData”: function ( sSource, aoData, fnCallback ) {
$.ajax( {
“dataType”: ‘json’,
“type”: “POST”,
“url”: sSource,
“data”: aoData,
“success”: fnCallback
} );
}*/
“oLanguage”: {
“sUrl”: “cn.txt”
},
“aoColumns”: [
{ "sName": "platform" },
{ "sName": "version" },
{ "sName": "engine" },
{ "sName": "browser" },
{ "sName": "grade" }
]//$_GET['sColumns']将接收到aoColumns传递数据
} );
} );

15、为每行加载id和class

1
2
3
4
5
6
7
8
9
10
服务器端返回数据的格式：
{
“DT_RowId”: “row_8″,
“DT_RowClass”: “gradeA”,
“0″: “Gecko”,
“1″: “Firefox 1.5″,
“2″: “Win 98+ / OSX.2+”,
“3″: “1.8″,
“4″: “A”
},

16、为每行显示细节，点击行开头的“+”号展开细节显示

在这里插入图片描述

更多参考：
要注意的是，要被dataTable处理的table对象，必须有thead与tbody，而且，结构要规整（数据不一定要完整），这样才能正确处理。
以下是在进行dataTable绑定处理时候可以附加的参数：在这里插入图片描述在这里插入图片描述
在这里插入图片描述

使用示例:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<!--数据列表-->
<table id="dataList"
   class="table table-bordered table-striped table-hover dataTable">
   <thead>
      <tr>
         <th class="sorting_asc">门牌号</th>
         <th class="sorting_asc">自编号</th>
         <th class="sorting_asc">用户名</th>
         <th class="sorting_asc">电话</th>
         <th class="sorting_asc">邮箱</th>
         <th class="sorting_desc">账户余额</th>
      </tr>
   </thead>
   <tbody>
      <c:forEach items="${pageInfo.list}" var="accountresetrecord">
         <tr>
            <td>${accountresetrecord.roomNo}</td>
            <td>${accountresetrecord.selfMeterNum}</td>
            <td>${accountresetrecord.userName}</td>
            <td>${accountresetrecord.phone}</td>
            <td>${accountresetrecord.email}</td>
            <td style="color:#FF0000;">${accountresetrecord.account}</td>
         </tr>
      </c:forEach>
   </tbody>
</table>
<!--数据列表/-->
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
js代码:

<script>
   //点击表头排序
      $(function() {
           $(".sorting_asc, .sorting_desc").click(function(){
               $("#dataList").DataTable({
                   "bPaginate": false, //翻页功能
                   "bLengthChange": false, //改变每页显示数据数量
                   "bInfo": false,//页脚信息
                   "bFilter": false, //过滤功能
                   "bAutoWidth": false,//自动宽度
                   "retrieve": true //返回DataTable实例
               } );
           });
       });

</script>

分类: jQuery