table.reload() 仅 where 参数生效,需将搜索条件置于 where 对象内,且须显式重置 page.curr=1、手动保存还原 initSort 和勾选项,否则导致页码错乱、状态丢失等问题。
table.reload() 的 where 是唯一生效的参数入口
调用 table.reload() 时,只有配置对象里的 where 字段会被合并进请求参数;其他字段(如直接写 keyword: 'abc')全被忽略。这不是 bug,是 layui 的设计约定。
常见错误现象:table.reload('userTable', { keyword: 'test' }) 发出去后接口收不到 keyword —— 因为没包在 where 里。
-
where必须是对象,不能是null、undefined或字符串 - 想保留初始化时的
where: { token: 'xxx' },就得手动合并:where: $.extend({}, initWhere, { keyword: val }) - ES6 可用展开运算符:
where: { ...initWhere, keyword: val } - POST 模式下,
where会作为 JSON body 发送,后端需支持解析原始 JSON(如 Express 要配bodyParser.json())
搜索参数为空时怎么避免传给后端?
用户没填关键词、状态选了“全部”,但你仍把 { keyword: '', status: '' } 塞进 where,后端可能误判为“查空字符串”,导致 SQL 查询异常或命中缓存。
- 动态构建
where对象,只添加非空值:if (val) params.keyword = val - 日期控件注意格式:laydate 返回
"2024-01-01",后端若要"2024/01/01"就得先转换 - 下拉框选“全部”时,建议设其 value 为
''或null,再统一过滤掉 falsy 值 - 用
new FormData(formEl)收集表单值时,记得Object.fromEntries()后再删空字段
重载后页码还停在第 5 页?必须显式重置 page.curr
用户在第 5 页搜了个词,reload 后不带 page: { curr: 1 },请求仍发 page=5,结果返回空数组,UI 显示「第 5 页 / 共 0 页」——这是最常被忽略的视觉错乱点。
- 只要搜索条件变了,就该回到首页:
page: { curr: 1 } - 如果想保留当前页码(极少见),得先读
table.config['yourTableId']?.page?.curr,但要注意该值可能滞后于 UI,稳妥做法是监听table.on('page()')存变量 - 老版本 Layui(2.5.6 之前)对
page.curr重置有 bug,建议升到 2.8+ 或强制加page: { curr: 1 } -
limit不用每次传,Layui 会自动继承,除非你要临时改每页条数
reload 后排序和勾选项全丢了,怎么保持?
Layui reload 是销毁重建 DOM,所以排序状态、已勾选行 ID 都不会保留。这不是参数没传对,是机制如此。
- 排序状态要自己存:
let sortState = { field: 'id', type: 'asc' },在table.on('sort(yourTable)', ...)里更新,reload 时传initSort: sortState - 勾选项无法自动恢复,得 reload 前用
table.checkStatus('yourTable')取出data或ids,reload 完再遍历table.checkRow()(前提是表格启用了id字段且唯一) - 频繁筛选+排序的场景,建议切到前端
data模式,避免反复请求后端 - 并发 reload(比如连点两次搜索)会导致状态竞争,需加 loading 锁或用
abort()取消前序请求
where: {}、强制重置 page: { curr: 1 }、手动保存并还原 initSort 和勾选 ID —— 这些都不在参数自动继承范围内,得每一处 reload 都亲手写进去。











