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 !
