DataTables 前后台数据交互,搜索分页
通过ajax数据交互 虽然高大上 但是前台压力大!
processing: true,
//开启服务端分页 开启ajax
serverSide:true,
//进行ajax请求
ajax:{
url:'{{route('haozuke.article.index')}}',
type:'GET',
//参数 动态获取表单数据用 function
data:function (ret) {
ret.datemin = $('#datemin').val();
ret.datemax = $('#datemax').val();
ret.title = $.trim($('#title').val());
}
},
columns:[
//{'data':'字段名称1','defaultContent':'默认值','className':'类名'}
]
});
// 表单提交
function dopost() {
// 手动调用 dataTable 插件
dataTable.ajax.reload();
//取消表单的默认事件
return false;
}
后台数据处理
注意: 数据处理时如果不慎重前台有可能数据处理崩溃 严格设置 防串改
借鉴网址:http://datatables.club/example/#server_side
if($request->header('X-Requested-With') == 'XMLHttpRequest'){
// 开启设置
$start = $request->get('start',0);
//搜索开始的时间
$datemin = $request->get('datemin');
//搜索结束的时间
$datemax = $request->get('datemax');
//关键字
$title = $request->get('title');
//查询对象
$query = Article::where('id','>',0);
// 日期
if (!empty($datemin) && !empty($datemax)){
// 开始时间
$datemin = date('Y-m-d H-i-s',strtotime($datemin.'00:00:00'));
// 结束时间
$datemax = date('Y-m-d H-i-s',strtotime($datemax.'23:59:59'));
$query->whereBetween('created_at',[$datemin,$datemax]);
}
//搜索关键词
if(!empty($title)){
$query->where('title','like',"%{$title}%");
}
//获取记录数
$length = min(40,$request->get('length',10));
//记录总数
$total = $query->count();
//获取返回的数据
$data =$query->offset($start)->limit($length)->get();
/**
* draw : 客户端调用服务器端次数标识
* recordsTotal : 获取数据记录总条数
* recordsFiltered : 数据过滤后的总数量
* data : 获得的具体数据
* 注意 recordsTotal和recordsFiltered都是设置为记录的总数
*/
$result=[
'draw'=>$request->get('draw'),
'recordsTotal'=>$total,
'recordsFiltered'=>$total,
'data'=> $data,
];
return $result;
}