layui实现数据表格table分页功能,异步加载,表格渲染。总体流程:layui的数据表格设置分页参数开启可以从请求中看到如下图,所以我们需要在后端控制器接收分页数据page和limit进行操作,下面直接上代码
分页链接
框架:laravel5.6
js代码
var share_id = $("#share_id").val();
layui.use('table', function(){
var table = layui.table;
table.render({
elem: '#record_table'
,url:'/getRecordMemberList'
,toolbar: '#toolbarDemo' //开启头部工具栏,并为其绑定左侧模板
,defaultToolbar: ['exports', 'print'],//头部工具栏右侧图标
cols: [[
{field:'car_num',title: '车牌号',align: 'center', sort: true},
{field:'member_phone',title: '手机号',align: 'center', sort: true},
{field:'status',title: '状态',sort: true,align: 'center',
templet:function(d){
if(d.status ==1)
return '已核销';
else
return '未核销'
}
},
{field:'add_time',align: 'center',title: '登记时间', sort: true},
{title:'操作', align: 'center',toolbar: '#barDemo'}
]],
where: {
share_id : share_id
}
,page: true,
});
controller代码
public function getRecordMemberList(Request $request)
{
$share_id = $request->input('share_id');
$page = $request->input('page');
$limit = $request->input('limit');
$offset=($page-1)*$limit;
$data = JSDMemberModel::selectRaw("
member_id,
share_id,
car_num,
member_phone,
status,
FROM_UNIXTIME(add_time,'%Y-%m-%d %H:%i:%s') as add_time
")
->where('share_id',$share_id);
$count = $data->count();
$data = $data->orderBy('status','asc')->orderBy('add_time','desc')->offset($offset)
->limit($limit)->get();
if(!collect($data)->isEmpty()){
return response([
'code'=>'0',
'msg'=>'ok',
'count'=>$count,
'data'=>$data]);
}else{
return response([
'code'=>'',
'msg'=>'false',
'count'=>'',
'data'=>'']);
}
}