layui表格分页栏不显示的直接原因是后端响应json缺少顶层count字段或其值非数字且大于0;必须通过parsedata手动提取并返回含count、data等标准结构的对象,否则分页功能完全失效。

后端返回的 JSON 缺 count 字段,分页栏直接消失
layui 表格渲染数据没问题,但底部连“第 1 页 / 共 0 页”都不显示——根本原因是它没看到 count。这个字段必须是顶层属性、数字类型、值 > 0,且和 code 一起存在才被识别为成功响应。
常见翻车点:
-
count写成total、totalCount或data.total - 后端返回
{"code": 0, "data": []},漏了count和msg -
count: "125"(字符串)导致分页器计算失败,下一页按钮变灰
调试建议:在 done 回调里加 console.log(res),确认 res.count 是数字且非 undefined、NaN 或负数。
parseData 怎么把后端任意结构转成 layui 要的格式
这是唯一可靠解法。layui 不支持字段映射配置,parseData 不是“补字段”,而是完全接管解析逻辑——你得手动返回含 code、msg、count、data 四个键的对象。
示例(后端返回 {"status": 200, "message": "ok", "rows": [], "total": 98}):
parseData: function(res) {
return {
code: res.status === 200 ? 0 : res.status,
msg: res.message || '',
count: res.total || 0,
data: Array.isArray(res.rows) ? res.rows : []
};
}
注意:
- 必须有
return,漏写就等于返回undefined,表格报Cannot read property 'length' of undefined -
data必须是数组,null或undefined会中断渲染 - 如果后端没给总条数(比如只返回当前页数据),
count可设为res.data.length,但分页功能将退化为“伪分页”
请求发出去了但 page 和 limit 参数没传到后端
现象是:表格永远只显示第一页,翻页无效,Network 面板里请求 URL 没带 ?page=2&limit=10。
根本原因:你在 url 里写了问号,比如 url: "/api/list?status=1",layui 默认拼参逻辑会被截断。
正确做法:
- 把固定查询参数挪进
where选项:where: { status: 1 },让 layui 统一拼接 - 不要手动拼 URL 查询参数;更别用
url: "/api/list" + "?status=1"这种字符串拼接 - 如果真要控制参数名(比如后端要
currentPage而不是page),用request配置:request: { pageName: 'currentPage', limitName: 'pageSize' }
table.reload() 时分页参数丢失或不重置
搜索后点“下一页”,结果还是从第 1 页开始加载——因为 reload 默认不重置当前页码,也不自动合并新 where 条件。
必须显式传参:
- 重置页码:
table.reload('id', { page: { curr: 1 } }) - 合并搜索条件:
where: { keyword: $('#keyword').val() },不能只写where: { keyword: 'xxx' }而不带page: { curr: 1 } - 如果你用了
request或parseData,reload时必须重新传,它不会继承初始化时的配置
最易忽略的一点:parseData 返回的 count 如果是字符串,哪怕 reload 多次,分页器也始终无法点击下一页——类型校验在每次响应后都执行,不是只校验第一次。











