真正清空表格数据需三步并行:调用table.clearCache清除缓存,reload时传where:{}重置查询条件并显式设置page:{curr:1},若为本地数据还需清空原始data变量。
table.reload({ data: [] }) 不能真正清空表格数据
直接调用 table.reload('tableid', { data: [] }) 只会把空数组渲染进当前页,但分页信息(总条数、当前页码)仍保留,翻页后旧数据照常出现。这不是清空,是“假装清空”。
更危险的是:如果表格启用了 page: true(服务端分页),传 data 字段会被忽略,reload 完全不生效。
常见错误现象:点击按钮后 tbody 空了,但页码显示“1 / 10”,点下一页立刻加载出第二页数据——用户以为删了,其实什么都没动。
清空数据必须重置分页 + 清空缓存 + 强制刷新
真正清空需三步并行,缺一不可:
• 调用 table.clearCache('tableId') 彻底删除内部选中状态、缓存的 allChecked 标志、跨页勾选项;
• 执行 table.reload('tableId', { where: {}, page: { curr: 1, limit: 10 } }),其中 where: {} 是关键,它让下一次请求不带任何搜索条件;
• 若表格依赖本地数据(data 配置项),需提前将原始数据变量设为空数组,否则 reload 时仍会从原 data 源取值。
注意:page: { curr: 1 } 必须显式传入,否则 reload 后可能卡在无数据的第 N 页,显示空白。
工具栏按钮绑定时容易漏掉实例引用
toolbar 按钮事件里调 table.reload() 常失败,根本原因是没拿到正确的表格实例。
正确做法:
• 在 table.render() 时保存返回值:var tableIns = table.render({ elem: '#myTable', ... });
• toolbar 点击回调中用 tableIns.reload({ where: {}, page: { curr: 1 } }),而不是 table.reload('myTable', ...);
• 如果多个表格共用同一 ID,table.reload('sameId') 可能操作错目标,而实例引用绝对精准。
漏掉这一步,按钮看似点了,但 reload 实际没作用于你期望的表格。
清空后 UI 不同步?别手动操作 checkbox 或 input
有人用 $('#myTable tbody').empty() 或遍历 input 设 value = '',这会导致 Layui 内部状态和 DOM 脱节。
后果:table.checkStatus('tableId') 仍返回旧勾选项,表头全选框状态错乱,甚至引发渲染冲突。
正确做法:
• 清空前确保已加载 form 模块:layui.use(['table', 'form'], function(){...});
• 若表格含自定义表单工具栏(如搜索区),清空后要补一句 form.render('checkbox') 同步复选框 UI;
• 对 laydate、layedit 等独立组件,需单独调其 setValue('') 或 destroy(),不能只清 input 的 value。


















