空数据时无法通过emptyText插入HTML按钮,必须在done回调中动态插入并用事件委托绑定;需同步处理多个tbody、防重复提交、清除缓存并正确设置colspan。
空数据时不能改 emptyText 里塞 HTML
你写 emptytext: '<button>刷新</button>',页面上真就显示那一串字符——layui 内部用 document.createtextnode 插入,所有标签都会被转义。更麻烦的是,哪怕你绕过这层用 jquery 直接改 dom,下一次排序、翻页或搜索,tbody 会被 layui 彻底清空重绘,按钮瞬间消失。
必须在 done 回调里判断并插入可点击元素
真实可用的入口只有 done 回调。这里能拿到原始响应 res,也具备操作表格容器的时机。关键点是:绑定事件必须用事件委托,因为目标容器(比如 .layui-table-body tbody)会被反复销毁重建。
- 检查
res.data.length === 0,满足则手动向.layui-table-box .layui-table-body tbody插入带 class 的<tr><td colspan="N">...</td></tr> - 给刷新链接加一个唯一 class,例如
data-reload-btn - 用
$(document).on('click', '.data-reload-btn', reloadTable)绑定,别用$('...').click() -
colspan值必须等于你表格实际列数,否则会错位;建议从insTb.config.cols[0].length动态读取
点击后要控制状态,避免重复提交
用户狂点刷新按钮,接口可能发出去五六次,而 table.reload() 还没完成,done 又进来,容易触发 Cannot read property 'appendChild' of null。
- 点击后立即将按钮
disabled,并加layui-btn-disabled类(配合 CSS 显示 loading 动画) -
table.reload()必须传where: { t: +new Date() }防 GET 缓存 - 成功回调里恢复按钮状态;失败时用
layer.msg('加载失败,请重试', {icon: 2}),并保留按钮可点,但建议加简单节流:2 秒内不可再点 - 绝对不要在重试函数里调
table.render()——实例销毁后,table.cache、table.checkStatus()全挂
分页和固定表头场景要同步处理多个 tbody
如果你启用了 height 参数导致出现固定表头,Layui 会生成两个 tbody:一个在 .layui-table-body,另一个在 .layui-table-fixed-l .layui-table-body(左固定列)。只操作前者,按钮会错位到右边空白处。
- 插入提示行时,需同时向两个
tbody写入相同结构的<tr> - 判断是否存在左固定列容器:
$('.layui-table-fixed-l .layui-table-body').length > 0 - 注意:右固定列(
.layui-table-fixed-r)一般不需操作,除非你显式设置了fixed: 'right'
emptyText 的幻想,全程接管空状态的生命周期。


















