空数据时不能用 emptyText 插入动画,因其仅支持纯字符串且会被转义;应于 done 回调中判断 res.data.length === 0 后,手动清空 tbody 并注入带动画的 HTML,注意 colspan 动态获取、动画类需同时存在、高度适配及事件委托绑定。
空数据时不能用 emptyText 插入动画
因为 emptytext 只接受纯字符串,内部会被 layui.util.escape() 转义,所有 html 标签(比如 <i class="layui-icon"></i>)都会变成明文显示,根本不会渲染成图标或动效。你写 emptytext: '<i class="layui-icon-loading-1"></i> 暂无数据',页面上就真显示那一串字符。
正确做法:在 done 回调里替换 tbody 内容
表格完成渲染后,done 会拿到 res,此时判断 res.data.length === 0 即可确认为空状态。然后手动清空并注入带动画的 HTML。
- 定位目标:
$(this.elem).next('.layui-table-box').find('.layui-table-body table tbody') - 清空再写入,避免残留:
$tbody.empty().append('<tr><td colspan="' + this.cols.length + '" style="text-align:center;padding:40px;"> <i class="layui-icon layui-icon-loading-1 layui-anim layui-anim-rotate layui-anim-loop" style="font-size:28px;color:#1E9FFF;"></i><p style="margin-top:10px;font-size:14px;color:#666;">暂无数据</p> </td></tr>') - 注意
colspan必须动态取this.cols.length,否则列数变化或响应式下会错位 - 动画类
layui-anim-rotate和layui-anim-loop必须同时存在才生效
如果用了 height 参数,动画区域可能被截断
当表格设置了固定高度(如 height: 400),空状态容器会被撑满,但你的自定义 HTML 默认不占满高度,容易出现滚动条或顶部空白。
- 给
<td> 加 <code>style="height: 400px; display: flex; align-items: center; justify-content: center;"(需配合父级table-layout: fixed) - 或者更稳妥:在外层加一个绝对定位的 loading 层,覆盖整个
.layui-table-box,而不是塞进tbody - 绝对定位方案需确保容器有
position: relative,且设min-height防止塌缩 - 绑定到不变的父容器上:
$(document).on('click', '.layui-table-view .retry-btn', function() { ... }) - 或者用表格实例的
elem:$(this.elem).closest('.layui-table-view').on('click', '.retry-btn', ...) - 点击后立即
$(this).prop('disabled', true),防止重复提交
按钮或交互元素必须用事件委托绑定
如果你在空状态里放了“重试”按钮,它不是初始 DOM 的一部分,后续翻页、搜索、排序都会重建 tbody,直接 $('.retry-btn').on('click', ...) 会失效。
done 都得重新判断和注入,漏一次,就回到默认“暂无数据”文本。


















