本文解决Layui表格渲染时接口返回数据成功但前端不显示的问题。核心原因在于Layui对返回JSON格式有严格要求,默认需包含code、msg、count和data四个字段。若后端返回结构不同,需在table.render中通过response配置项进行字段映射。实测表明,仅code和data为必要字段,msg和count可选。注意statusCode无需配置,否则可能导致数据显示失败。
Layui表格数据不显示问题概述
在使用Layui框架时,可能会遇到接口调用返回成功,但表格组件未能正确渲染数据的情况。这是一个值得注意的常见陷阱。
Layui默认JSON格式要求
Layui框架对接收到的JSON数据格式有着严格的规定。通常情况下,系统期望接收包含四个特定参数的JSON对象,它们分别是:
code:0 //数据状态
msg:"" //状态信息
count:1000 //数据总数
data:[] //数据列表
自定义字段映射配置方法
如果后端返回的JSON对象包含上述四个参数,且参数名称与Layui默认要求完全一致,则表格可以正常读取并显示数据。如果参数名称不一致,则需要进行相应的转换配置,具体方法如下所示:
response:{
statusName: '自定义的参数名称' ,// 对应 code
msgName: '自定义的参数名称' , // 对应 msg
countName: '自定义的参数名称' , // 对应 count
dataName: '自定义的参数名称' // 对应 data
}
上述配置代码需要放置在table.render({})的配置对象内部。
必要字段与可选字段实测结论
经过实际测试发现,msg和count这两个字段并非绝对必要。即使不传递这两个字段,或者参数名称不匹配且未进行转换,前台表格页面依然能够显示数据。真正不可或缺的核心参数只有code和data。
官方文档地址:传送门
statusCode配置注意事项
在官方文档的配置项中,statusCode字段不需要进行配置。如果错误地配置了该字段,反而会导致数据无法成功显示。

以上关于Layui中接口传数据成功但表格不显示数据的解决方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持本站。