Layui table加载失败后需手动清空容器并插入“点击重新加载”按钮：在error回调中调用table.clearCache()、$('#demo').empty()，再注入带click事件的按钮，点击时传入完整render配置重绘；注意2.8+ clearCache需传id、height兼容处理及parseData抛错触发error。
layui table 数据加载失败后怎么显示“点击重新加载”按钮
直接改 error 回调 + 手动清空表格容器内容，再插入带事件的按钮。Layui 的 table.render() 本身不提供失败重试 UI，得自己接管错误状态。
为什么不能只靠 done 或 error 回调自动处理
error 回调只通知你出错了，但表格区域仍保留 loading 状态或空白；done 在请求成功后才触发，失败时压根不进。而且默认不会清空已渲染的表头、分页栏——结果就是卡在半加载状态，用户没法点任何东西。
-
error回调里必须手动调用table.clearCache()避免缓存干扰 - 要清掉
table容器（比如#demo）里的所有子节点，否则旧表头和新按钮会叠在一起 - 按钮绑定的重载逻辑，得复用原始
table.render()的配置，不能只调table.reload()——后者不重传url和where，容易漏参数
实际怎么写：三步搞定重试 UI
核心是拦截失败、清现场、塞按钮、绑点击。别碰 cols 或 page 配置本身，专注状态切换。
- 在
table.render()的error回调里，先执行$(‘#demo’).empty() - 然后插入 HTML：
<button class="layui-btn" id="reload-btn">点击重新加载</button> - 再用
$(‘#reload-btn’).on(‘click’, function(){ table.render({...}) })重新渲染——注意这里要传完整配置对象，不是只传{id: ‘demo’}
示例关键片段：
table.render({
elem: '#demo',
url: '/api/list',
error: function(res){
table.clearCache('demo');
$('#demo').empty().html('<button class="layui-btn" id="reload-btn">点击重新加载</button>');
$('#reload-btn').on('click', function(){
table.render({ /* 原始完整配置 */ });
});
}
});
容易被忽略的兼容性细节
Layui 2.8+ 的 table.clearCache() 要传 id 参数，老版本不认；另外如果表格启用了 height，清空容器后按钮可能被高度撑开看不见——得补一句 $('#demo').css('height', 'auto')。
- 用
table.reload()替代完整重 render？不行，它不重发请求，也不重读url，除非你显式传url和where - 按钮样式用
layui-btn就行，别加额外 class，避免和主题冲突 - 如果接口返回的是 200 但业务码非 0（比如
{code: 1, msg: "未登录"}），得在parseData里 throw 错误，才能进error回调
重试逻辑一旦写进 error，就别再依赖 done 做兜底——那个只对成功响应有效。失败状态的 UI 控制权，得彻底交到你自己手里。
