emptyText 不显示是因为只支持纯文本,HTML会被转义;必须在done回调中手动处理空状态,清空tbody并插入带colspan的提示行,同步处理固定列和分页栏显隐,且每次reload前需预清理。

为什么 emptyText 不显示或只显示文本
Layui 的 emptyText 配置项只接受纯字符串,内部会调用 document.createTextNode() 插入内容,所有 HTML 标签(比如 <i class="layui-icon"></i>)都会被转义成明文。你写 emptyText: '<div>暂无数据</div>',页面上就真显示那一串字符,根本不会解析渲染。
必须在 done 回调里手动处理空状态
done 是唯一可靠时机:表格完成渲染、res.data 和 count 已确定,且 DOM 尚未被后续操作覆盖。此时判断 res.data.length === 0 && count === 0 才算真正空态。
- 定位 tbody:
$(this.elem).next('.layui-table-box').find('.layui-table-body table tbody') - 清空并注入 HTML:
$tbody.empty().append('<tr><td colspan="' + this.cols.length + '" style="text-align:center;padding:20px;">暂无数据</td></tr>') -
colspan必须动态取this.cols.length,否则列数变化时错位 - 如果表格启用了固定列(
fixed),还要同步操作.layui-table-fixed-l .layui-table-body table tbody和.layui-table-fixed-r .layui-table-body table tbody
分页栏存在时的特殊处理
当 page: true 开启后,Layui 会在 .layui-table-page 下渲染分页控件。若仅替换 tbody,分页栏仍会显示“共 0 条”“第 1 页”,视觉割裂。
- 建议同时隐藏分页栏:
$('.layui-table-page').hide() - 或者更稳妥:在
done中根据空态显隐分页栏:count === 0 ? $('.layui-table-page').hide() : $('.layui-table-page').show() - 注意:不要直接删 DOM,否则
table.reload()时可能报错
reload 后空态容易残留
每次调用 table.reload(),done 都会触发,但旧的空态 HTML 可能还留在 tbody 里。若不主动清理,多次搜索为空会堆叠多个提示行。
- 务必在
done开头加预清理:$tbody.children().remove()或$tbody.empty() - 避免用
innerHTML = '',它可能破坏 Layui 内部引用 - 如果用了自定义 loading 层(绝对定位覆盖),也要在
done中统一控制显隐
done,漏掉任意一环,空提示就会失效或错位。


















