多条件搜索必须用 table.reload() 配合 where,而非 filter 方法;Layui 的 filter 仅支持本地单字段模糊匹配且仅限当前页,多条件实时搜索须通过 reload() 模拟服务端请求并重载全量数据。
多条件搜索必须用 table.reload() 配合 where,不是靠 filter 方法
layui 的 table.filter() 只作用于本地 data 模式下的单字段模糊匹配,且仅对当前页生效;多条件实时搜索(尤其是带日期、下拉、状态等组合)必须走 table.reload() + where 路径,哪怕数据是前端加载的,也得模拟“服务端请求”逻辑才能正确重载全量结果。
- 别在
cols里给多个列加filter: true试图联动——Layui 不支持跨列联合筛选,点了第二列就会清掉第一列 -
where必须是 plain object,不能是字符串、数组或undefined;空值建议显式设为null或空字符串,避免被 layui 忽略 - 如果表格初始化用了
url,reload()才会真正发请求;如果用的是data数组,reload()仍会触发请求(除非你额外配method: 'get'和url: null),但此时更推荐直接操作table.cache+table.render()
监听输入时得用防抖,否则每敲一个字都 reload
用户连续输入 “张三丰”,不加防抖会触发 3 次 table.reload(),其中前两次请求还没返回,第三次已经覆盖了——不仅浪费请求,还可能导致 UI 状态错乱(比如页码跳变、选中态丢失)。
- 用
setTimeout+clearTimeout实现基础防抖,延迟建议 300ms;不要用 100ms,中文输入法上屏有延迟 - 别在
input事件里直接调用reload(),先存keyword、status、dateRange等值到一个对象里,再统一构造where - 输入框必须用
layui.$(selector).val()读值,不用原生this.value,防止 Layui 重绘后 DOM 引用失效
page: { curr: 1 } 不加就等于没搜
用户正在看第 5 页,输完关键词点搜索,如果不重置页码,reload() 仍会请求 page=5&limit=10,而新条件很可能只匹配出 12 条数据——第 5 页必然为空,表格显示空白,用户以为“没结果”。
- 每次
reload()都要显式带上page: { curr: 1 },别指望table.config.page.curr是实时的,它可能滞后 - 如果表格配置了
height、limit、toolbar等参数,reload()时也得一并传入,否则样式或功能会丢失 - 清空所有搜索条件后,
where设为空对象{},同时保持page: { curr: 1 },才能回到初始状态
字段名和后端约定不一致,搜出来永远是空
前端写 where: { username: val },后端接口却接收 user_name 或 nickName,参数根本收不到,自然查不到数据。这不是 Layui 的 bug,是前后端契约没对齐。
- 打开浏览器 Network 面板,点搜索后看请求 Query String 里实际传了什么字段,对照后端文档逐个核对
- 日期范围要拆成两个字段传(如
start_time和end_time),别传一个dateRange对象,后端没法解析 - 下拉框的 value 如果是数字(如
1表示“启用”),确保后端接收类型匹配;传字符串"1"却用 int 接收,可能被转成 0











