jquery.datatables 前端分页工具使用

jQuery.datatables是一款基于jQuery表格插件。

需求：需要弄个前端分页、前端筛选（自定义）的表格。基本实现功能如下：

前端DataTable 静态筛选 基本使用

//  demo 1   ajax 取数据
   var table2 = $('#table_details').DataTable({   // 1
       //排序功能.
       ordering: false,
       processing: true,
       deferRender: true,
       bSortClasses: true,
       info: false,  // 去除多余的自带信息
       //定义初始的页长
       pageLength: 10,
       pagingType: 'full_numbers',  // 分页的样式
       search: true,
       ajax: {    //  2
           url: url, // 请求的url  // todo
           type: "get",
           dataSrc: function (result) {
                // 接口回来的数据  这里可以对部分后台数据进行处理，也可加入dom
                //  result.data[i].f_income = "<a href='javascript:;' class='fail' > - " + result.data[i].Value + " </a>";
               return result.data;
           },
       },
       columns: [   //  3
           {data: "no"},
           {data: "Age"},
           {data: "TxHash"},
           {data: "INOUT"},
           {data: "f_moneyType"},
           {data: "f_income"},
           {data: "TxFee"},
           {data: "balance"},
       ]
   });

    setTimeout(function(){
        table2.ajax.reload();    //4  更新表格数据
    },4000)

      setTimeout(function () {  //  5  根据字段筛选，排序
         table2.search( 'withdraw' ,false ,false ).draw();
     },5000)

1、 table_details 对应的 html 中table dom 元素
2、ajax 获取全部的后台数据 ，其中url 即时对应的dom url。
3、columns 数组对应表格的每一列数据字段 no 、age 等即是result.data 中对应的字段。
4、实例.ajax.reload() 实现接口数据的更新。
5、按withdraw 的字段进行筛选、排序。

前端自逻辑筛选 最、最、最重要的一点。

 $.fn.dataTable.ext.search = [];  //  初始化
 if (table2_sel_dayVal !== 0) {
     $.fn.dataTable.ext.search.push(function (settings, data, dataIndex) {
         if (data && data[1]) {
             var currTimeSearch = new Date(data[1]).getTime();
             var currTimeDel = ( new Date().getTime() ) - ( table2_sel_dayVal * 24 * 3600 * 1000 );
             if (currTimeSearch > currTimeDel) {
                 return true;
             }
         }
         return false;
     });
 } else {
     $.fn.dataTable.ext.search.push(function (settings, data, dataIndex) {
         return true;
     });
 }
 table2.search(table2_sel_betVal, false, false).draw();

利用 $.fn.dataTable.ext.search 进行自己逻辑处理，可以理解为 筛选数组 的形式，进而实现表格的前台筛选。

更正确的姿势

            $.fn.dataTable.ext.search = [];  //  初始化
            $.fn.dataTable.ext.search.pop();  //  push 之前 最好pop 一下，防止多个条件的干扰
            if (table3_sel_dayVal !== 0) {
                $.fn.dataTable.ext.search.push(function (settings, data, dataIndex) {
                    // 筛选逻辑
                    if (data && data[1]) {
                        var currTimeSearch = new Date(data[1]).getTime();
                        var currTimeDel = ( new Date().getTime() ) - ( table3_sel_dayVal * 24 * 3600 * 1000 );
                        if (currTimeSearch > currTimeDel) {
                            if (table3_sel_betVal === 0) {
                                return true
                            }
                            if (data[6] === table3_sel_betVal) {
                                return true
                            }
                        }
                    }
                    return false;
                });
            }
            js_withdraw_table.draw();

table3_sel_dayVal 、 table3_sel_betVal 就是对应筛选条件， 每次表格进行draw() 时候，会执行push 里头的函数，return true代表通过筛选，则会在表格中展现出来，return false 即是失败，不会在表格上展现出来。

参考相关文档

datatables中文网
datatables官网
更为详细博文