layui框架实战案例(1)：layui组件table异步加载数据结合php后台动态翻页的解决方案

layui组件table美观度和实用性都是比较完美的。但是在使用table翻页功能的时候，需要对后台进行传参，并且返回的json数据一定要符合一定的规范，否则将无法实现翻页。

layui版本： layui-v2.5.6

**php代码：**原生代码，无框架；

返回JSON格式规范：

{"code":0,
"msg":"",
"count":1000,
"data":[{"id":10000,"username":"user-0","sex":"女","city":"城市-0","sign":"签名-0","experience":255,"logins":24,"wealth":82830700,"classify":"作家","score":57}]
}

解决方案： 一、引入样式表及layui.js

二、table容器

三、表格渲染

    layui.use(['table', 'layer', 'form'], function () {
        var table = layui.table;
        table.render({
            elem: '#test'
            , url: 'index.php'
            , layout: ['count', 'prev', 'page', 'next', 'limit', 'skip']
            , limits: [5, 10, 15, 20]
            , toolbar: true
            , even: true
            , page: true
            , cols: [[
                {field: 'orders_id', title: 'Id', sort: true}
                //, {field: 'orders_name', title: '姓名', sort: true}
                , {field: 'pay_status', title: '性别'}
                , {field: 'orders_category', title: '文化程度'}
                , {field: 'orders_payway', title: '民族'}
                //, {field: 'orders_tel', title: '联系电话'}
                //, {field: 'orders_price', title: '身份证号'}
            ]]
            , done: function (res, curr, count) {
                //如果是异步请求数据方式，res即为你接口返回的信息。
                //如果是直接赋值的方式，res即为：{data: [], count: 99} data为当前页数据、count为数据总长度
                console.log(res);
                //得到当前页码
                console.log(curr);
                //得到数据总量
                console.log(count);
            }
        });
    });

四、php后端

query($sql);
$res['code'] = 0;
$res['msg'] = "";
$res['count'] = 20;
$data = $stmt->fetchAll("4");
$res['data'] = $data;
echo json_encode($res);

Done !