done回调接收res、curr、count三个参数,其中res为完整响应体,curr为当前页码,count为总条数;DOM操作必须在done内执行,此时表格行已挂载;this指向table实例,可访问elem、reload等属性;超时或解析失败时done不触发,需用error或ajaxSetup处理。
done函数接收三个参数:res、curr、count。其中res是服务器返回的完整响应体(不是res.data,而是整个 json 对象),curr是当前页码,count是总数据条数。注意:如果后端返回结构不符合 layui 默认约定(比如没包在data字段下),必须配合parsedata函数做转换,否则res里拿不到正确数据。
表格行元素是异步插入的,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 实例对象,不是 window。它有多个实用属性:
this.elem:指向初始化时传入的 elem 选择器对应 DOM 元素(如 #demo)this.elem.next():常用来获取渲染后的包裹容器(含 .layui-table-box)this.reload():可在 done 里触发重载(比如根据条件自动刷新)tableIns.reload(),因为 tableIns 是 render 返回值,而 done 执行时可能还没赋值给变量done 只在请求成功且数据解析无误时执行。网络超时、404、500 或 parseData 抛错都会跳过 done,直接走 error 流程。Layui 的 table.render 本身不暴露 timeout 配置项,得靠两种方式补救:
$.ajaxSetup({ timeout: 30000 }),所有 table 请求继承该超时$.ajax({ timeout: 30000 }) 拿数据,再传给 table.render({ data: [...] })
done 处理异常 —— 它只管“成功渲染后”,失败得另起炉灶done 是“渲染完成”的通用钩子,其实它只响应“成功加载并解析数据”这一种路径;一旦接口卡住或格式不对,done 就静默失效,连 console.log 都不会执行。