获取数据库中大量的信息显示在页面上，必然要使用到分页查询；

若不使用Ajax，而是用其他的方法，肯定是要刷新页面的，用户体检很不好，

所以最好使用Ajax的方法写分页查询；

引入jquery包：

<script src="jquery-1.11.2.min.js"></script>

php代码

public function order_lists(Request $request){//接收参数$params = $request->get();//计算偏移量$count = ($params['page'] - 1) * $params['limit'];// 模板输出$result =EbLiveStudio::limit($count, $params['limit'])->select();$count = EbLiveStudio::count();//返回给前台return json(['code' => 0,'data' => $result,'count' => $count,'msg' => '操作成功']);}

前台页面

<div class="layui-card-body "><table class="layui-hide" id="test"></table>
</div>

js事件 需要用ajax，这个方法主要起后台查询，且分页的作用：

<script>layui.use('test', function(){var table = layui.table;table.render({elem: '#live_table',url:'/cms/Curd/order_lists/', limit: 5, page: true //开启分页,cellMinWidth: 80 //全局定义常规单元格的最小宽度，layui 2.2.1 新增,cols: [[{field:'id', width:80, title: 'id', sort: true},{field:'live_title', width:120, title: '用户名'}, {field: 'live_image', title: '直播二维码', minWidth: 150, align: 'center', templet: '#img'}, {align: 'center', title: '操作', toolbar: '#barDemo'}]]});});//显示大图片function showBigImage(e) {layer.open({type: 1,title: false,closeBtn: 0,shadeClose: true, //点击阴影关闭area: [$(e).width + 'px', $(e).height + 'px'], //宽高content: "<img src=" + $(e).attr('src') + " />"});}
</script>
<script type="text/html" id="barDemo"><a class="layui-btn layui-btn-xs" lay-event="detail"  onclick="genQrCode(this)" >生成直播二维码</a><a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a><a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>
<script type="text/html" id="img"><div><img src="{{d.live_image}}" style="width:20px;height:20px" onclick="showBigImage(this)"></div>
</script>

页面效果：