Layui表格怎么设置在数据为空时显示一个去添加的按钮

作者：袖梨 2026-06-20

Layui表格emptyText配置无效，需在done回调中手动插入带“去添加”按钮的空状态区块，并确保其位于.layui-table-body内以兼容滚动和分页。

data为空时Layui表格不显示`emptyText`怎么办

Layui 2.8+ 的 table.render() 默认会在数据为空时显示“暂无数据”，但这个文案是写死在 CSS 里的伪元素，emptyText 配置项**根本不起作用**——这是最常被卡住的第一步。

真正生效的方式只有两个：覆盖 CSS 伪元素内容，或手动接管空状态渲染。后者更可控，也符合你“放一个‘去添加’按钮”的需求。

别在 cols 或 page 配置里找 emptyText，它只对某些旧版 Layui（如 2.5.x）的局部组件有效，表格不认
如果你用了 url 异步加载，且后端返回了空数组 []，Layui 会触发 done 回调，但不会自动显示自定义按钮
必须在 done 回调里判断 res.data.length === 0，然后手动操作 DOM

如何在`done`回调里插入“去添加”按钮

核心思路：用 layui.table.cache 拿到表格容器，再往它的 .layui-table-box .layui-table-body 内部追加一层带按钮的提示区块。注意不能直接塞进 .layui-table，否则会破坏表格结构导致样式错乱。

示例代码（假设表格实例名是 ins1）：

table.render({  elem: '#demo',  url: '/api/list',  cols: [[{field:'title', title:'标题'}]],  done: function(res, curr, count) {    if (count === 0) {      const tableBox = $(this.elem).next('.layui-table-box');      const body = tableBox.find('.layui-table-body');      // 先清掉可能残留的空提示      body.find('.layui-table-empty').remove();      // 插入自定义区域      body.append(`        <div class="layui-table-empty" style="padding: 40px 0; text-align: center;">          <button class="layui-btn layui-btn-primary" onclick="location.href='/add'">            去添加          </button>        </div>      `);    }  }});

$(this.elem).next('.layui-table-box') 是关键，Layui 渲染后会在原 <table> 后插入一个包裹容器，所有滚动、空状态都在里面
务必用 .layui-table-empty 这个 class，否则 Layui 自带的样式（比如居中、字体大小）不会生效
不要用 table.reload() 触发重绘来“刷新空状态”，它不会重新走 done，也不会清空旧的空提示

为什么不用`text: {none: 'xxx'}`

这个配置项只对 Layui 的 laydate、form 等组件有效，table 模块压根没实现它。查源码可知：table.js 中没有任何地方读取 text.none，所有空状态逻辑都硬编码在模板字符串和 CSS 里。

试图这样写是无效的：text: { none: '<button>去添加</button>' }
即使你强行用 CSS 覆盖 .layui-table-view .layui-table-tips 的 ::before，也无法绑定点击事件——因为那是纯文本伪元素
所以绕过配置、手动生成 DOM 是唯一可靠路径

兼容性与边界情况提醒

如果表格启用了 height（固定高度）、scrollbar 或 limit 分页，空状态容器必须放在 .layui-table-body 内部，否则按钮会被截断或无法滚动触达。

使用 height: 'full-xx' 时，.layui-table-body 是 overflow-y: auto 的，按钮必须在里面才可滚动显示
如果后端返回的是 {code:0, data:null} 而不是 data:[]，记得在 parseData 里统一转成空数组，否则 count === 0 判断会失效
多个表格共存时，别用全局 $('.layui-table-empty') 清除，一定要限定在当前 this.elem 的上下文里操作