Layui表格分页失败时需优先检查Network面板中的请求状态码、响应JSON结构(含数字类型count字段)及Preview层级,配合done回调抓原始响应,并确认page显式设为true且未混用data字段。

Network 面板里看真实请求和响应
“没报错”不等于“没问题”,Layui 表格分页失败时,控制台往往静默,真正线索全在 Network 里。打开浏览器开发者工具 → 切到 Network 标签 → 筛选 XHR → 点一次下一页或跳转页码,找到对应请求。
重点看三块:
- 状态码(Status):不是 200 就要立刻查后端;404 说明路径错,500/502 是服务端崩了或网关挂了
- Response 标签页:确认返回的是合法 JSON,且含
count和data字段——哪怕count是 0,也得是数字类型,不能是字符串"0" - Preview 标签页:比 Response 更友好,能直接看到格式化后的结构,一眼判断字段层级是否对得上(比如是不是嵌在
result或body里)
console 里加 done 回调抓原始返回
done 是唯一能拿到服务端原始响应的地方,无论成功失败都会触发。别只靠 parseData,它只在响应体是 JSON 时才进得来;而 done 的第三个参数 xhr 始终存在,能读出所有原始信息。
写法示例:
done: function(res, curr, count, xhr) {
console.log('表格渲染完成', { res, curr, count, status: xhr.status, responseText: xhr.responseText });
}
这样输出后,你就能看到:
- 如果
xhr.status !== 200,但xhr.responseText是 HTML(比如 Nginx 502 页面),说明网关层出问题 - 如果
res是空对象或undefined,基本是 JSON 解析失败,检查后端是否漏了Content-Type: application/json - 如果
res有code但没count,Layui 就不画分页栏——它不报错,只当没这回事
检查 parseData 是否吞掉了错误字段
很多人把 parseData 当成“数据转换器”,只处理 data,却忘了 count 才是分页的命门。只要它返回的 count 不是正整数,分页栏就彻底消失,连个提示都没有。
常见坑点:
- 后端返回
{ result: { total: 100, items: [...] } },你在parseData里只写了return { data: res.result.items },漏了count: res.result.total -
count字段值是null或undefined,Layui 内部会当 0 处理,分页栏不显示 - 用
parseInt()转count时没校验,比如后端传了"abc",结果转成NaN,Layui 直接放弃分页逻辑
确认 page 配置是否真生效
Layui 分页不是默认开启的,page: true 必须显式写出来,写成 page: {} 或干脆不写,分页栏都不会出现。
还要注意:
- 如果用了
data字段(前端静态数据),page: true就够了;但一旦配了url,就必须走服务端分页,且后端必须返回count -
page设为对象时,limits必须是数组,比如[10, 20, 50],写成字符串或没写,分页下拉框会空白 - 别在
where里传page和limit——Layui 会自动拼,手动传反而可能冲突
最常被忽略的一点:分页栏是否渲染,只取决于 count 是否存在且为有效数字,跟 data 数组长度无关。哪怕接口返回 100 条数据,但 count 字段缺失或为 0,分页栏照样不出现。


















