必须同时满足后端返回code/msg/count/data标准结构、前端URL参数与TP的input('page')/input('size')严格对齐、data为纯索引数组三个条件,否则表格仅渲染第一页或报“data is not defined”;后端用$list->total()和$list->items()构造JSON,前端url需含?page={{page}}&size={{limit}}并配parseData解析。

ThinkPHP 8.0 自定义分页器要让 Layui 表格正确翻页、显示总数、支持每页条数切换,必须同时满足后端返回结构合规、前端 URL 参数对齐、数据路径可解析三个硬性条件——漏掉任意一环,表格就只渲染第一页或报错“data is not defined”。
后端构造标准 Layui 分页 JSON
在控制器中,不能直接 return $list->render() 或 $list->toArray(),Layui 表格只认 code/msg/count/data 四个顶层键。
第一步:用 $list->total() 拿真实总条数,别用 count($list),后者只返回当前页数据量。
第二步:用 $list->items() 提取纯数据数组,别用 $list->all(),它会把分页元信息(如 current_page、last_page)一并塞进 data 字段,导致 Layui 解析失败。
立即学习“PHP免费学习笔记(深入)”;
第三步:手动组装 JSON 结构,字段名一个字母都不能错:【code 必须为 0,count 必须是整数,data 必须是索引数组】
示例代码(ThinkPHP 8.0):
$data = [
'code' => 0,
'msg' => '',
'count' => $list->total(),
'data' => $list->items()
];
return json($data);
前端 table.render 配置要点
Layui 表格默认不传 page 和 limit 参数,必须显式声明并和 ThinkPHP 的 input() 接收逻辑严格匹配。
方法一:URL 中用 {{page}} 和 {{limit}} 占位符,且参数名必须与后端一致
url: '/api/user/list?page={{page}}&size={{limit}}' —— 注意是 size,不是 limit;ThinkPHP 默认用 input('size') 接收每页条数。
方法二:禁用自动分页,改用 parseData 手动提取
parseData: function(res) { return { code: res.code, msg: res.msg, count: res.count, data: res.data }; } —— 这步能绕过字段映射错误,但前提是后端已返回标准结构。
方法三:开启 page 并指定 layout,确保跳转按钮可用
page: { layout: ['count', 'prev', 'page', 'next', 'limit', 'skip'], limits: [10, 20, 50], groups: 5 }
关键参数对齐校验表
ThinkPHP 后端接收方式必须与前端发送方式完全对应,否则翻页时 page=2 但后端始终读到 page=1。
前端 URL 中的 ?page={{page}}&size={{limit}} → 后端用 input('page/d', 1) 和 input('size/d', 10) 接收
前端未带 size 参数 → 后端 input('size') 返回 null → paginate() 使用默认 15 条 → 前端显示条数与实际不符
【务必检查:控制器里是否写了 input('size/d', 10),而不是 input('limit/d', 10)】
若后端强制用 limit 字段,前端 URL 就得改成 ?page={{page}}&limit={{limit}},且 limits 数组值会原样传过去。
调试失败的三秒定位法
打开浏览器 Network → 点下一页 → 找对应请求 → 看 Response 内容:
如果返回 {"code":0,"msg":"","count":0,"data":[]} → 后端查不到数据,检查 where 条件或数据库连接
如果返回 {"code":0,"msg":"","count":123,"data":{"current_page":1,"data":[...]}} → data 是对象不是数组,说明用了 $list->all(),立刻换 $list->items()
如果返回 {"code":0,"msg":"","count":123,"data":[]} → 前端 URL 的 page 或 size 没传过去,检查 table.render 的 url 是否含 {{page}} {{limit}} 占位符
如果表格空白无报错 → 打开 Console,看是否有 “data is not an array” 提示,有则说明 parseData 没写或返回结构错层



















