应使用 parseData 钩子转换格式,返回含 code、count、data 的对象,其中 code 为数字、count 为总数、data 为数组,否则表格空白或分页失效。
后端返回的 JSON 不符合 layui.table 默认格式怎么办
layui 的 table.render() 默认要求接口返回必须带 code、msg、count、data 四个字段,否则表格直接空白或报错 typeerror: cannot read property 'length' of undefined。这不是前端解析失败,是 layui 内部硬校验 res.data 是否存在且为数组。
实操建议:
- 优先改后端:加一层薄包装,把真实数据塞进
{code: 0, msg: "", count: total, data: [...realData]},最省事也最稳定 - 如果不能动后端,必须用
parseData钩子做格式转换——它在响应到达后、Layui 解析前执行,是唯一合法的“洗数据”入口 - 注意
parseData函数必须 显式 return 一个含code、count、data的对象,return 缺任何一项都会触发失败逻辑
parseData 怎么写才不丢数据也不报错
常见错误是把原始响应整个 return,或者只改 data 却漏了 count。Layui 分页依赖 count 值算总页数,没它就只能显示第一页,且翻页按钮失效。
假设后端返回长这样:
{
"status": "success",
"items": [
{"id": 1, "name": "张三"},
{"id": 2, "name": "李四"}
],
"total": 42
}对应 parseData 应该这么写:
parseData: function(res) {
return {
code: res.status === 'success' ? 0 : 1, // Layui 只认 0 为成功
msg: res.message || '',
count: res.total || res.items.length, // 必须有,不能为 undefined
data: res.items || [] // 必须是数组,空数组也行
}
}
关键点:
-
code字段值必须是数字,字符串"0"会被判为失败 -
count不能从res.items.length动态推——那是当前页数量,不是总数;必须由后端明确返回total或等价字段 - 如果后端连
total都不给,只能设为固定大数(如99999),并禁用分页:page: false
为什么开了 page: true 却只显示第一页
本质是 count 解析失败或为 0/NaN,导致 Layui 认为“总共 0 条”,于是隐藏分页栏、强制锁定第一页。控制台通常不会报错,但 Network 面板里能看到响应体,检查 parseData return 的 count 值是否合理。
排查步骤:
- 在
parseData里console.log(res)和return前的结构,确认count确实被赋了有效数字 - 检查后端是否对
limit、page参数做了校验,返回了异常状态(比如页码超限返回空数组+total: 0) - 确认没有同时设置了
url和data——Layui 会忽略data,只走远程请求,但初学者常误以为能混用
兼容旧版 Layui(2.5.x)和新版(2.8+)的写法差异
2.8+ 版本对 parseData 返回值校验更严格:若 data 是 null 或 undefined,会直接 throw error;而 2.5.x 会静默转为空数组。如果你维护老项目,升级前务必检查所有 parseData 是否兜底了 data: res.xxx || []。
另一个坑是 response 配置项:2.8+ 支持重命名字段(如把 data 映射成 list),但仅限于后端字段名和 Layui 默认名不同、结构仍合规的情况。一旦结构不合规(比如没 count),还是得靠 parseData。
所以结论很实在:别迷信 response,只要后端格式不标准,parseData 就是唯一靠谱的出口。它多两行代码,但能避开 80% 的表格加载失败问题。











