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

  <link rel="stylesheet" href="layui/css/layui.css" media="all">
    <script src="layui/layui.js" charset="utf-8"></script>

二、table容器

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

三、表格渲染

<script>
    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);
            }
        });
    });
</script>

四、php后端

<?php
//处理前台页面传过来的数据
@$p = $_GET['page'] == "" ? 1 : $_GET['page'];//获取用户选择的页码
@$pagesize = $_GET['limit'] == "" ? 10 : $_GET['limit'];//获取用户选择的每页显示多少条数据

/*echo $p;
echo $pagesize;*/

//连接数据库
$dsn = 'mysql:dbname=lingcheng;host=127.0.0.1';
$user = 'root';
$pass = 'root';
$pdo = new PDO($dsn, $user, $pass);


//查询数据
$res = [];
$limit = ($p - 1) * $pagesize;//偏移量
$sql = "select * from po_orders order by orders_id limit $limit,$pagesize";
$stmt = $pdo->query($sql);
$res['code'] = 0;
$res['msg'] = "";
$res['count'] = 20;
$data = $stmt->fetchAll("4");
$res['data'] = $data;
echo json_encode($res);

Done !