Layui表格渲染接口数据成功但不显示的解决方案

作者:终端旅客

时间:2026-10-22

浏览:124

本文解决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表格数据不显示问题概述

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

实用工具推荐

电子包浆

绿化、压缩、噪点和虚拟水印,自由调节做旧程度。

使用 ›
图片压缩

选择画质和输出格式,预览压缩前后的大小。

使用 ›
相关文章