Layui表格如何设置无数据时的提示文字-Layui教程-PHP中文网

layui table 的 emptyText 不生效，主要因分页开启或数据结构错误：启用 page 时需后端返回 count: 0；本地 data 模式下须确保 data 为真实空数组且未混用 url；emptyText 必须置于 render 顶层配置，否则无效。

layui table 的 `emptyText` 配置不生效？

直接设 emptytext 没反应，大概率是因为没关掉 page 或者数据结构不对。layui 的表格空状态提示只在「完全无数据」时触发，一旦启用了分页（哪怕当前页没数据），它就默认走分页的空逻辑，emptytext 被忽略。

实操建议：

确认是否启用了分页：如果 page: true 或 page: { ... }，必须配合 limits 和后端返回 count: 0 才能触发空提示；否则前端渲染时表格会认为“有分页但暂无数据”，不走 emptyText
关闭分页测试最简单：临时设 page: false，再传一个空数组 data: []，这时 emptyText 就会立刻显示
emptyText 必须写在 table.render() 的顶层配置里，不能放在 cols 或 done 回调里

后端返回空数据，但页面还是显示加载中或空白

常见现象是表格区域一直转圈、没提示也没报错。这通常不是 emptyText 的问题，而是数据加载流程卡在了异步环节。

实操建议：

检查后端响应格式是否符合 Layui 要求：必须返回 { code: 0, msg: "", count: 0, data: [] }；count 字段不能缺，即使为 0 —— Layui 用它判断总条数，缺了就当请求失败
确认 url 请求是否真的完成：打开浏览器 Network 面板，看对应接口返回状态码是否为 200，响应体是否可解析
避免在 parseData 回调里漏 return，或者 return 了错误结构（比如忘了包一层 data 数组）

想自定义空状态样式，比如加图标或按钮

Layui 默认的 emptyText 只支持纯文本，没法插 HTML。硬塞 <span></span> 标签进去会直接被转义显示为字符串。

实操建议：

改用 done 回调手动处理：在回调里判断 res.count === 0，然后用原生 JS 找到表格主体容器（通常是 .layui-table-box .layui-table-body），清空并插入自定义 HTML
注意时机：必须等 table.render() 完成后再操作 DOM，否则容器还没生成；可在 done 里用 setTimeout(..., 0) 确保渲染完毕

示例片段：

done: function(res, curr, count){<br>  if(count === 0){<br>    var body = document.querySelector('.layui-table-box .layui-table-body');<br>    if(body) body.innerHTML = '<div class="layui-text-center" style="padding: 40px;">
<i class="layui-icon layui-icon-face-smile"></i><p>暂无数据</p>
<button class="layui-btn">去添加</button>
</div>';<br>  }<br>}

使用 `data` 属性本地渲染时，`emptyText` 不出现

本地数据模式下，表格初始化时如果 data: []，emptyText 应该立即生效。但很多人发现它压根不显示，界面就是一片空白。

实操建议：

确保 data 是一个真实空数组，不是 null、undefined 或字符串 "[]"；Layui 对非数组类型会静默忽略
检查是否误写了 cols 结构：如果 cols 里字段名和 data 数组元素的 key 对不上，Layui 可能无法正确识别数据为空，导致不触发空提示
不要同时设置 url 和 data：两者互斥，Layui 优先走 url，data 会被无视