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函数)。