最可控方式是在error回调中清空容器并插入按钮,但需配合table.clearcache('demo')和$('#demo').css('height', 'auto')重置高度;更推荐在done回调中判断res.code或data长度,动态插入colspan提示行并用事件委托绑定刷新按钮,同时添加防重复提交、缓存规避及递增超时重试机制。

error 回调里清空容器并插入按钮
直接在 error 回调中操作 DOM 是最可控的方式,但必须配合 table.clearCache() 和高度重置,否则按钮可能被隐藏或错位。
-
table.clearCache('demo')必须传入表格 ID(Layui 2.8+ 要求),老版本不传也能用,但混用会出兼容问题 -
$('#demo').empty().html(...)后,如果表格启用了height参数,容器仍维持固定高度,按钮会被挤到可视区外——得补一句$('#demo').css('height', 'auto') - 别在
error里调table.render()重绘,实例未销毁,但缓存已清,容易触发Cannot read property 'appendChild' of null
done 回调里处理空数据 + 刷新按钮(更推荐)
真正稳定的做法是放弃 error,改在 done 中判断响应状态。因为多数“加载失败”其实是后端返回了非 0 code,而非网络异常,done 仍能拿到 res。
- 检查
res.code !== 0 || res.data.length === 0,满足任一条件就手动向.layui-table-body tbody插入带colspan的提示行 -
colspan值必须等于实际列数,建议从insTb.config.cols[0].length动态读取,硬编码易错位 - 如果启用了
height导致出现固定表头,需同时向.layui-table-fixed-l .layui-table-body tbody插入相同结构,否则按钮只出现在右侧空白处 - 按钮绑定必须用事件委托:
$(document).on('click', '.data-reload-btn', reloadTable),否则翻页/排序后按钮失效
重试逻辑要防重复提交和缓存
用户狂点刷新按钮时,接口请求会堆积,而 table.reload() 并不阻塞后续调用,必须加状态控制。
- 点击后立即设按钮
disabled并加layui-btn-disabled类(配合 CSS 显示 loading) -
table.reload()必须带where: { t: +new Date() },否则 GET 请求可能命中浏览器或代理缓存 - 成功回调里恢复按钮状态;失败时用
layer.msg('加载失败,请重试', {icon: 2})提示,但保留可点——加个简单节流:2 秒内禁止再点 - 绝对不要在重试函数里调
table.render(),实例还在,但table.cache已被清空,table.checkStatus()会报错
超时重试要递增间隔且有退出机制
单纯靠用户点按钮不够,自动重试需控制节奏,避免雪崩。
- 首次失败后等 1000ms 重试,第二次等 2000ms,第三次等 3000ms,之后不再自动重试
- 三次失败后,把按钮文字改为“网络异常,请重试”,并移除自动重试逻辑,交由用户手动干预
- 重试计数器必须存在表格实例上(如
insTb.retryCount = 0),不能放全局变量,否则多表格冲突 - 每次重试前检查
insTb.retryCount ,满足才执行 <code>setTimeout,否则直接显示最终提示











