dataTables 插件学习整理

在项目中使用了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             },