layui——数据表格分页实例

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 '<span style="color:#1E9FFF;">未核销</span>'
                }
        },
        {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'=>'']);
                }
    }
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。