jQuery DataTables的服務器端一般配置+整合多列多參數多字段篩選，排序(實例)

由於工作需要，要做一個新的後臺統計。近日正在使用DateTables與百度eChart，鑑於DataTables的中文文檔並不全面,近期我將向大家分享一些本人使用dataTables的一些心得以及遇到的一些問題的解決方法。

DataTables的一般配置(實例)：

var datat = $(".dataTables").DataTable({ //用jQuery給
        dom: '<"html5buttons">lTg<"searchinput">tp', //控件位置配置
        "aLengthMenu": [[100,50, 25, 10], [100,50, 25, 10]],  //分頁控件列表值
        "pageLength":10,  //初始化默認分頁大小
        "processing":true,
        "searching": true,  //允許搜索
        "serverSide":true,   //服務器端處理（一般大家做的都會是服務器端的吧？）
        ajax:{  //數據源...（AJAX不必多說）
            url: url,  //數據請求地址
            type:"POST",
            data:{id:id}  //所傳參數，如果是子列表的話需要傳的那個id值就放在這裏~
        },
        "columns":[{"data":null},{"data":"name"},{"data":null},{"data":"date"},{"data":"order"},{"data":"user"},{"data":"amount"},{"data":null},{"data":'new'}],   //數據渲染，列號從0開始排序
        /* 後臺所返回是的數據爲數組,其中data將是數據源，返回數據格式： Array
(
    ["data"] => Array
        (
        [0] => Array(
            [name] => '張三'
            [date] => '2012-12-20'
            ...
            [new] => 0
           )
         [1] => Array( 
         ... 
         */
        //防止第一行 永遠有排序圖標
        "order": [],
        "paginationType":"full_numbers",
        //規定哪列可以排序
        columnDefs:[
            {targets:[0,1,2,3,7,8],orderable:false},//不可排序的列
         //數據自定義渲染
            {
                targets:6,
                render:function(data,type,row,meta){
                    switch(row.amount){
                        case null:
                            return "0.00";
                            break;
                        default:
                            return row.amount;
                            break;
                    }
                }
            },
            {
                targets:2,
                render:function(data,type,row,meta){
                    switch(row.status){
                        case 1:
                            return "<span class='text-navy'>進行中</span>";
                            break;
                        case 2:
                            return "<span class='text-danger'>已結束</span>";
                            break;
                        case 3:
                            return "<span class='text-warning'>未開始</span>";
                            break;
                        default:
                            return row.status;
                            break;
                    }
                }
            } 
            },
        ],   
    });

//自定義篩選框
    var $searchinputhtml = '<div class="col-sm-own"><label>活動狀態:&nbsp;&nbsp;</label><select name="status" class="form-control m-b statusselect"><option value="">全部</option><option value="1">進行中</option><option value="2">已結束</option><option value="3">未開始</option></select></div></div>'+'<div class="col-sm-own"><div class="input-group"><span class="input-group-addon"><i class="fa fa-search"></i></span><input type="text" class="form-control keyword" name="keyword" placeholder="活動名稱或商家" /></div></div>';

    $("div.searchinput").html($searchinputhtml);
    $("div.searchinput").append('<div class="col-sm-own"><button data-style="zoom-out" class="ladda-button btn btn-primary search_all">搜索<span class="ladda-spinner"></span></button></div>'); //將所需樣式通過js填入模板中
//搜索事件    
$(".search_all").click(function(){
        var seastatus = $(".statusselect").val();
        var keyword = $(".keyword").val();
        datat.column( 1 ).search( keyword ).column( 3 ).search( seastatus ).draw();  //篩選重繪
    });

column( 1 ).search( keyword )並不必很嚴格，只與參數鍵名有關。例如我第一列數據渲染的是 “name”,假設篩選時keyword值爲 ‘張三’ ,那麼後臺所接收數據就是

"column"=>array(
        'name'=> '張三'
)

多個值即是：

"column"=>array(
        'name'=> '張三',
        'status'=> 2
)

在後臺處理時，不必嚴格按照本鍵名，例如我用name去傳status的值status去傳name的值也是完全可行的，只要後臺做好處理就行。column( )在這時僅僅傳遞了參數名。

在一列傳遞多個參數或者參數過多，列不夠用時，也可使用拼接參數的方法傳遞多個參數。例如需要進行時間段篩選時：

var start_time = $(".start_time").val();
var end_time = $(".end_time").val();
datat.column( 2 ).search( start_time+"*"+end_time ).draw();

在後臺將接受到的參數分解開就行了。
(PHP下可以使用explode函數)。