layui+tp5.1动态生成table表格,并进行分页

1.html部分

<table id="demo" lay-filter="test"></table>
  <script type="text/html" id="toolbarDemo">
  <div class="layui-btn-container" >
    <button class="layui-btn layui-btn-sm" lay-event="delete">删除</button>
    <button class="layui-btn layui-btn-sm" lay-event="update">编辑</button>
  </div>
</script>

2.js部分

var tableIns=table.render({
    elem: '#demo'
    ,align:'center'
    ,where: { //设定异步数据接口的额外参数,任意设
			    'shop_id': 0,
			    'status':0,
			  }
    ,url: '{:url("Employee/selwaiter")}' //数据接口
    ,page: true //开启分页
    ,toolbar: '#toolbarDemo'
    ,defaultToolbar: ['filter', 'print', 'exports']
    ,cols: [[ //表头
      {field: 'id', title: 'ID'}
      ,{field: 'true_name', title: '员工姓名'}
      ,{field: 'sex', title: '性别'}
      ,{field: 'phone', title: '电话'} 
      ,{field: 'status', title: '身份'}
      ,{field: 'selshop', title: '店铺名称'}
      ,{fixed: 'right', title: '操作',align: 'center',toolbar: '#toolbarDemo'}
    ]]
    ,id: 'testReload'
    ,page: {
	    curr: 1 //重新从第 1 页开始
	    ,layout: ['limit', 'count', 'prev', 'page', 'next', 'skip'] //自定义分页布局
      //,curr: 5 //设定初始在第 5 页
      ,limit:5 //一页显示多少条
      ,limits:[5,10,15,20,25,30]//每页条数的选择项
      ,groups: 5 //只显示 2 个连续页码
      ,first: "首页" //不显示首页
      ,last: "尾页" //不显示尾页
				 }
});
//表格重载
var $ = layui.$, active = {
      reload: function(){
          //执行重载
          table.reload('testReload', {
              page: {
                  curr: 1 //重新从第 1 页开始
              }
              ,where: { //设定异步数据接口的额外参数,任意设
			    'shop_id': 0,
			    'status':0,
			  }
          });
      }
};

3.php部分

public function selwaiter(){
	$page=request()->param('page');
	$limit=request()->param('limit');
	$shop_id=input('param.shop_id');
	$status=input('param.status');
	if($shop_id){
		$wherestatus['shop_id']=$shop_id;
		if($status){
			$wherestatus['status']=$status;
		}else{
			$wherestatus['status']=[2,3];
		}
	}else{
		if($status){
			$wherestatus['status']=$status;
		}else{
			$wherestatus['status']=[2,3];
		}
	}
	$waiterData=User::with(['selshop'=>function($qurey){
		$qurey->field('id,shop_name');
	}])->where($wherestatus)->limit(($page-1)*$limit,$limit)->select()->toArray();
	foreach($waiterData as $k=>$v){
		$waiterData[$k]['selshop'] = $v['selshop']['shop_name'];
	}
	$allcount=count(User::where($wherestatus)->select());
	 $res = [
	              'code'=>0,
	              'msg'=>'返回成功',
	              'count'=>$allcount,
	              'data'=>$waiterData
	          ];
	return json($res);
}

结果如下
layui+tp5.1动态生成table表格,并进行分页_第1张图片

你可能感兴趣的:(layui)