Layui table渲染成功后done回调函数用法

先理清一个关键点：done 回调并非“万能渲染完成钩子”，它只在特定路径下触发。很多新手最容易踩的坑，就是把 done 当成了“表格渲染完毕”的通用信号，结果发现超时或数据格式不对时，done 静默失效，连个 console.log 都不执行。所以，先搞懂它到底能拿什么、什么时候能动、怎么用才不会翻车，比什么都重要。

done 回调里能拿到什么参数

done 函数接收三个参数：res、curr、count。其中 res 是服务器返回的完整响应体——注意，是整个 JSON 对象，不是 res.data。而 curr 是当前页码，count 是总数据条数。这里有个容易忽略的细节：如果后端返回的结构不符合 Layui 默认约定（比如数据没包在 data 字段下面），那你必须配合 parseData 函数做转换，否则 res 里拿到的数据就是错的，后面的逻辑全白搭。

DOM 操作必须写在 done 里，不能放 render() 后面

表格行元素是异步插入的，table.render() 调用完立刻执行后续 JS，此时 .layui-table tbody tr 还不存在。常见错误是这样写：

table.render({ elem: '#demo', url: '/api/list' });
document.querySelector('.layui-table tbody tr'); //  一定为空

正确做法是把所有 DOM 查询和修改逻辑全塞进 done 回调里：

• done 执行时，.layui-table-box tbody tr 已真实挂载到页面
• 此时可安全使用 $(...).find(...) 或原生 document.querySelectorAll
• 别加 setTimeout(() => {}, 0) —— done 已经是 DOM 就绪后的最早时机，再套一层纯属多余

done 中 this 指向 table 实例，能访问 elem 和 reload 方法

done 函数内部的 this 是当前 table 实例对象，不是 window。它有几个实用属性：

• this.elem：指向初始化时传入的 elem 选择器对应 DOM 元素（如 #demo）
• this.elem.next()：常用来获取渲染后的包裹容器（含 .layui-table-box）
• this.reload()：可在 done 里触发重载（比如根据条件自动刷新）
• 注意：不能直接用 tableIns.reload()，因为 tableIns 是 render 返回值，而 done 执行时可能还没赋值给变量。用 this.reload() 才是最稳妥的方式

超时或失败时 done 不会触发，要靠 error 或全局 ajaxSetup 捕获

done 只在请求成功且数据解析无误时执行。网络超时、404、500 或 parseData 抛错都会跳过 done，直接走 error 流程。Layui 的 table.render 本身不暴露 timeout 配置项，得靠两种方式补救：

• 全局设置：$.ajaxSetup({ timeout: 30000 })，所有 table 请求继承该超时
• 手动请求 + data 渲染：先用 $.ajax({ timeout: 30000 }) 拿数据，再传给 table.render({ data: [...] })
• 别指望 done 处理异常 —— 它只管“成功渲染后”，失败得另起炉灶

真正容易被忽略的是：很多人以为 done 是“渲染完成”的通用钩子，其实它只响应“成功加载并解析数据”这一种路径；一旦接口卡住或格式不对，done 就静默失效，连 console.log 都不会执行。所以，error 回调或全局 ajaxSetup 的配置一定要跟上，千万别指望 done 能兜底。