datatable 个人案例

一次完整的使用dataTable：

为方便以后使用，特记录，网上综合结果。

HTML：

<div class="mt-20">
      <table class="table table-border table-bordered table-bg table-hover table-sort table-responsive" id="bigDataList">
         <thead>
         <tr class="text-c">
            <th ><input type="checkbox" name="" value=""></th>
            <th></th>
            <th></th>
            <th></th>
            <th></th>
            <th></th>
            <th></th>
         </tr>
         </thead>
         <tbody>
         </tbody>
      </table>
</div>

< div > < table class= " table-sort" id= "bigDataList" > < thead >

        <tr class="text-c">
   <th ><input type="checkbox" name="" value=""></th>
   <th></th>
   <th></th>
   <th></th>
   <th></th>
   <th></th>
   <th></th>
</tr>

</ thead > < tbody > </ tbody > </ table > </ div >

<button name="" id="searchsubmit"  type="submit" οnclick="search()">搜资讯</button>

JS:

//表格管理设置
var table;
function search() {//用于条件筛选数据时的ajax搜索
    table.draw();
}
$(function() {
    if (table == null) {
        table = $('.table-sort').DataTable({

//具体配置什么的就不写了，配置太多项，只写基本项

  "bServerSide": true, // 开启服务端处理模式

"aLengthMenu": [[20, 50, 100, 150, -1], [20, 50, 100, 150, "All"]],

"sAjaxSource": "{{ url('admin/subject_extand/ajax_list')}}",//ajax搜索路径，laravel环境

"fnServerData": function (sSource, aoData, fnCallback) {
    aoData.push({"name": "logmin", "value": $("#logmin").val()})//获取搜索条件的值
    aoData.push({"name": "logmax", "value": $("#logmax").val()})
    aoData.push({"name": "name_search", "value": $("#name_search").val()})
    aoData.push({"name": "total_data", "value": $("#total_data").val()})
    $.ajax({
        // "dataType": 'json',
        "type": "POST",
        "headers": {'X-CSRF-TOKEN': "{{csrf_token()}}"},、z
        "url": sSource,
        "data": aoData,
        "success": fnCallback
    });
},

"aoColumns": [{
    "mData": "id",//1
    // "sTitle": "<input type="checkbox" name="" value="">",//这个标题会覆盖掉html所设置的标题，当需要使用类似全选样式时，建议将此处标题注释
    "bSortable": false,
    'className':'text-c',//内容样式
    "mRender":function(data, type, full) {
        var cls = 'btn';//标签样式
        var val = '选定'+data;
        if(data){
            cls= 'btn l';//标签样式
            val = '已选定'+data;
        }
        return "<input type=\"checkbox\" class='"+cls+"' value='"+data+"'>"+val+"</input>";
    }
}, {
    "mData": "id",//2
    "sTitle": "序号",
    "bSortable": false,

}, {
    "mData": "subject_name",//3
    "sTitle": "博物馆名称",
    'className': 'text-c'
}, {
    "mData": "logo",//4
    "sTitle": "详细地址",
    "bSortable": false
}, {
    "mData": "deleted_at",//5
    "sTitle": "QQ"
}, {
    "mData": "updated_at",//6
    "sTitle": "时间"
}, {
    "mData": "created_at",//7
    "sTitle": "忽略"
}],

        });
    }
})

结果：

$(function(){$("table thead th input:checkbox").on("click",function(){$(this).closest("table").find("tr > td:first-child input:checkbox").prop("checked",$("table thead th input:checkbox").prop("checked"))});

PHP：

接受从datatable传递过来的数据。laravel环境下的php代码：

public function ajax_list(Request $request,Subject $subject)
{
     if(!$request->ajax()){
        return ["STATUS"=>"ERROR","CODE"=>1];
    }
    //搜索条件
    $kerword = $request->get('name_search');//关键字查询
    $logmin = $request->get('logmin');//开始时间
    $logmax = $request->get('logmax');//结束时间
    $logmin = isset($logmin)?$logmin:'';
    $logmax = isset($logmax)?$logmax.' 23:59:59':'';
    $offset = $request->get('iDisplayStart');//每次从多少条数据开始查询，偏移量
    $row = $request->get('iDisplayLength');//每次显示的条数
    //时间区间
    $params['Range']['created_at'] = [$logmin, $logmax];
    $params['Key']['subject_name'] = [$kerword];
    $params['Limit']['limit'] = [$row];
    $params['Offset']['Offset'] = [$offset];

    //根据搜索条件搜索结果
    $obj  = DB::table('subject')->Select('*');
    $data = $this->setWhere($obj,$params)->get()->map(function ($value) {
        return (array)$value;
    })->toArray();//laravel 直接将搜索变成数组

    //将搜索结果按照某个字段进行排序
    $iSortCol_0 = $request->get('iSortCol_0');//获取排序的列数
    $sSortDir_0 = $request->get('sSortDir_0');//获取排序的规则 asc /desc
    $filter_order = $request->get('mDataProp_'.$iSortCol_0);//获取排序的字段，从搜索结果中排序，

    //将name提取出来存储到一维数组里
    $fiter_by = array();
    foreach ($data as $v) {
        $fiter_by[] = $v["$filter_order"];
    }
    //按照这个字段进行升序或降序排序
    $sSortDir_0 == 'asc'? array_multisort($fiter_by, SORT_ASC, $data):array_multisort($fiter_by, SORT_DESC, $data);

    $cnt = DB::table('subject')->count();//该表结果总数
    $info = [
        'draw'=>$request->get('draw'),//返回datatable表必须字段
        'recordsTotal'=>$cnt,//总记录数
        'recordsFiltered'=>$cnt,//查询结果数？
        'data'=>$data,//返回数据
    ];
    return $info;
}

//根据搜索条件链式连接sql语句

private function setWhere($obj,$params = [])
    {
        $where  = '';
        foreach($params as $key=>$val) {
            switch($key) {
                //过滤条件
                case 'Filter'://字段值
                    foreach($val as $Filterkey=>$Filterval) {
                        if (!empty($Filterval)) {
                            $obj = $obj->where($Filterkey,'=',$Filterval[0]);
                        }
                    }
                    break;
                case 'Range' ://字段值范围
                    foreach($val as $Filterkey=>$Filterval)
                    {
                        if (!empty($Filterval[0])) {
                            $obj = $obj->where($Filterkey,'>=',$Filterval[0]);
                        }
                        if (!empty($Filterval[1])) {
                            $obj = $obj->where($Filterkey,'<=',$Filterval[1]);
                        }
                    }
                    break;
                case 'Key'://关键词查询值
                    foreach($val as $Filterkey=>$Filterval) {
                        if (!empty($Filterval)) {
                            $obj = $obj->where($Filterkey,'like','%'.$Filterval[0].'%');
                        }
                    }
                    //$val = $this->FilterString($val);
                    /* $this->client->AddQuery( $val, Yii::$app->params['sphinxIndex'] );*/
                    break;
                // 字段按照排序

                case 'Limit'://每次查询条数
                    foreach($val as $Filterkey=>$Filterval) {
                        if (!empty($Filterval)) {
                            $obj = $obj->limit($Filterval[0]);
                        }
                    }
                    //$val = $this->FilterString($val);
                    /* $this->client->AddQuery( $val, Yii::$app->params['sphinxIndex'] );*/
                    break;
                case 'Offset'://偏移量，分页
                    foreach($val as $Filterkey=>$Filterval) {
                        if (!empty($Filterval)) {
                            $obj = $obj->offset($Filterval[0]);
                        }
                    }
                    break;
            }
        }

        return $obj;
    }