在项目中使用了dataTables 插件，学习整理一下。
dataTables 的官方中文网站 http://www.datatables.club
引入文件：
所有的都要引入 jq文件
1. dataTables 的样式
<link rel="stylesheet" href="jquery.dataTables.css">
<script src="jquery.dataTable.js">
2. bootstrap 风格的dataTables
<link rel="stylesheet" href="bootstrap.css">
<link rel="stylesheet" href="dataTables.bootstrap.css">
<script src="bootstrap.js">
<script src="jquery.dataTable.js">
<script src="dataTable.bootstrap.js">
HTML 代码
1 <table id="example" width="100%" class="table table-striped table-bordered"> 2 <thead> 3 <tr> 4 <th>编码</th> 5 <th>职位</th> 6 <th>姓名</th> 7 <th>状态</th> 8 <th>项目</th> 9 <th>机构</th> 10 <th>操作</th> 11 </tr> 12 </thead> 13 </table>
JS 代码基本配置
1 var lang = {
2 "sProcessing": "处理中...",
3 "sLengthMenu": "每页 _MENU_ 项",
4 "sZeroRecords": "没有匹配结果",
5 "sInfo": "当前显示第 _START_ 至 _END_ 项，共 _TOTAL_ 项。",
6 "sInfoEmpty": "当前显示第 0 至 0 项，共 0 项",
7 "sInfoFiltered": "(由 _MAX_ 项结果过滤)",
8 "sInfoPostFix": "",
9 // "sSearch": "本地搜索：",
10 "sUrl": "",
11 "sEmptyTable": "暂无数据",
12 "sLoadingRecords": "载入中...",
13 "sInfoThousands": ",",
14 "oPaginate": {
15 "sFirst": "首页",
16 "sPrevious": "上页",
17 "sNext": "下页",
18 "sLast": "末页",
19 "sJump": "跳转"
20 },
21 "oAria": {
22 "sSortAscending": ": 以升序排列此列",
23 "sSortDescending": ": 以降序排列此列"
24 }
25 };
26
27 $('#example').DataTable({
28 "processing" : true, //DataTables载入数据时，是否显示进度条
29 "serverSide": true, // 开启服务端模式
30 "language": lang, //提示信息
31 "autoWidth": false, //自适应宽度，
32 "sScrollY" : 450, //DataTables的高
33 "sScrollX" : 820, //DataTables的宽
34 "columnDefs": [
35 {"targets": 0, "width": "10%"}, // 设置第一列的宽度
36 {"targets": 1, "width": "10%"},
37 {"targets": 2, "width": "10%"},
38 {"targets": 3, "width": "10%"},
39 {"targets": 4, "width": "20%"},
40 {"targets": 5, "width": "20%"},
41 {"targets": 6, "width": "20%"}
42 ],
43 "lengthMenu": [10, 20, 30], // 显示每页显示的条数
44 "stripeClasses": ["odd", "even"], // 为奇偶行添加样式
45 "searching": true, // 是否允许开启本地检索功能
46 "bFilter": false, // 去掉 搜索框
47 "paging": true, // 是否开启本地分页
48 "lengthChange": true, //是否允许产品改变表格每页显示的记录数
49 "info": true, // 控制是否显示表格左下角的信息
50 "bSort": false, // 禁止排序
51 "deferRender": true, // 延迟渲染
52 "pageLength": 10, // 每页显示的条数
53 //跟数组下标一样，第一列从0开始，这里表格初始化时，
54 "order": [2, 'asc'], //asc升序 desc降序 // 下标为2，第三列 生序排列
55 "aoColumnDefs": [{
56 "orderable": false,// 指定列不参与排序
57 "aTargets": [1,3,4,5,6] // 指定 下标为[1,3,4,5,6]的不排序
58 }],
59 "initComplete": function () { // 给每列添加下拉搜索
60 var api = this.api();
61 api.columns().indexes().flatten().each(function (i) {
62 if (i != 0 && i != 2 && i != 6) { // 第1，3，7不添加，其余的添加
63 var column = api.column(i);
64 var select = $('<select><option value=""></option></select>')
65 .appendTo($(column.header())) // 显示在table中最上面在thead里面
66 .on('change', function () {
67 var val = $.fn.dataTable.util.escapeRegex(
68 $(this).val()
69 );
70 column
71 .search(val ? val : '', true, false)
72 .draw();
73 });
74
75 column.data().unique().sort().each(function (d, j) {
76 var text = $(d).html(); // 获取 span 里面的 text
77 var val = $(d).attr("value"); // 获取span 里面的自定义属性 value
78 if(text != null && text.trim() != "" && val != null && text.trim() != ""){
79 select.append('<option value="' + val + '">' + text + '</option>')
80 }
81
82 });
83 }
84
85 });
86 },
87 "ajax": { // ajax 请求数据
88 "url": "请求路径",
89 "type": "get"
90 },
91 "columns":[
92 {data: name}(后台返回的字段名), // 有几列就解析几次
93 data: tell(后台返回的字段名),
94 ...
95 // 还可以写
96 //{
97 // "data": function (e) {
98 // return e.name;
99 // }
100 // },
101
102 ]
103
104
105 });
给每一列添加下拉搜索的方法 （2）官方
首先在html中添加
1 <tfoot> 2 <tr> 3 <th></th> 4 <th></th> 5 <th></th> 6 <th></th> 7 <th></th> 8 <th></th> 9 </tr> 10 </tfoot>
js代码
1 initComplete: function () {
2 var api = this.api();
3 api.columns().indexes().flatten().each( function ( i ) {
4 var column = api.column( i );
5 var select = $('<select><option value=""></option></select>')
6 .appendTo( $(column.footer()).empty() ) // 给tfoot里面添加select
7 .on( 'change', function () {
8 var val = $.fn.dataTable.util.escapeRegex(
9 $(this).val()
10 );
11 column
12 .search( val ? '^'+val+'$' : '', true, false )
13 .draw();
14 } );
15 column.data().unique().sort().each( function ( d, j ) {
16 select.append( '<option value="'+d+'">'+d+'</option>' )
17 } );
18 } );
19 }
给每列添加自定义属性
1 // 在 "columns" 下面添加
2 createdRow: function (row, data, index) {
3 // 给每列添加 自定义属性 name
4 $(row).attr('name',data.name);
5 }
给每列添加点击事件
$('#example tbody').on( 'click', 'tr', function () { }) ;
自定义的分页 ，只给后台传指定的参数
length // 页面显示的条数，每页显示多少条、
start // 开始的记录序号
draw // 当前页面
1 "ajax": function (data, callback, settings) {
2 //封装请求参数
3 var param = {};
4 param.length = data.length;//页面显示记录条数，在页面显示每页显示多少项的时候
5 param.start = data.start;//开始的记录序号
6 param.draw = data.draw;//当前页码
7
8 //ajax请求数据
9 $.ajax({
10 type: "get",
11 url: "请求路径",
12 cache: false, //禁用缓存
13 data: param,
14 dataType: "json",
15 success: function (result) {
16 //封装返回数据
17 var returnData = {};
18 returnData.draw = result.data.draw;//这里直接自行返回了draw计数器,应该由后台返回
19 returnData.recordsTotal = result.data.recordsTotal;//返回数据全部记录
20 returnData.recordsFiltered = result.data.recordsFiltered;//后台不实现过滤功能，每次查询均视作全部结果
21 returnData.data = result.data.data;//返回的数据列表
22 //调用DataTables提供的callback方法，代表数据已封装完成并传回DataTables进行渲染
23 //此时的数据需确保正确无误，异常判断应在执行此回调前自行处理完毕
24 callback(returnData);
25 }
26 });
27 },