一次完整的使用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; }