Layui table如何设定渲染请求失败后的自定义HTML提示

在error回调中先$(elem).empty()清空容器，再插入带click事件的“点击重新加载”按钮HTML，并绑定完整render配置重绘；需注意clearCache传id、height兼容处理及parseData抛错触发error。

table.render 的 error 回调里怎么插入 HTML 按钮

layui.table 的 error 回调是唯一能捕获请求失败（如 404、502、超时、跨域拒绝）并执行自定义 dom 操作的入口。它在 xhr 状态异常或网络中断时触发，此时表格尚未渲染，dom 干净可操作。

• error 的参数 res 是原始 xhr 对象，不是 JSON 数据，别试图 res.msg 或 res.data
• 必须先清空容器：$(elem).empty()，否则残留骨架或 loading 动画会干扰按钮显示
• 若表格配置了 height（如 height: 400），清空后容器仍保持固定高度，按钮可能被截断或压在底部——需同步重置：$(elem).css('height', 'auto')
• 按钮建议加 class layui-btn 保证基础样式，再用内联 style 微调垂直居中或 margin

为什么不能只靠 parseData 或 done 处理请求失败

parseData 只在响应体为合法 JSON 时执行，遇到 Nginx 502 页面、PHP Fatal Error 输出的 HTML、或空响应体，它根本不会触发；done 则只在请求成功（status === 200）且解析无误后才调用。两者都覆盖不了网络层失败场景。

• 典型漏掉的错误：后端服务宕机 → 返回空白页或 HTML 错误页 → parseData 不进，done 不进，只有 error 被触发
• 不要在 done 里检查 xhr.status 来替代 error——done 的第三个参数 xhr 在失败时不可靠，部分浏览器可能为 null
• error 回调中无法访问 this.elem，得提前把表格容器选择器存到闭包变量里，或从参数 res 的 srcElement 反推（不推荐）

点击重载按钮时如何复用原始配置

直接调 table.reload('id') 不会重新发请求，也不读取 url 和 where，除非显式传参。最稳的方式是把原始配置对象存在外部变量里，点击时完整重 render。

• 配置对象必须包含 elem、url、cols 等必要字段，id 字段可选但建议加上便于后续管理
• 如果原配置用了函数式 templet 或 toolbar，确保它们在重 render 作用域内仍可访问（避免闭包丢失）
• 重载前调 table.clearCache('id')（Layui 2.8+ 必须传 id 参数），否则缓存数据可能污染新请求
• 按钮事件绑定要放在 error 回调内部，避免多次渲染导致重复绑定

容易被忽略的兼容细节

看似简单的“失败提示 + 重试”组合，在真实项目里常因边界情况失效。

• 移动端 Safari 对 error 回调触发有延迟，按钮可能闪一下就消失——加一句 setTimeout(() => { /* 插入按钮 */ }, 100) 更稳妥
• 若表格容器是动态创建的（比如 tab 切换后才 append），error 触发时父级 DOM 可能还未挂载，需确认容器已存在
• 使用模块化加载（layui.use(['table'], ...)）时，确保 table 实例在 error 执行时已初始化完成，否则 table.reload 报 undefined
• 按钮文案别写死“重新加载”，应结合上下文，比如搜索失败时写“重新搜索”，权限不足时写“请登录”——这需要你在 error 里根据 res.status 或 res.statusText 做分支判断