layui表格搜索必须用函数式where实时取值、reload时重置page.curr为1、动态换接口需在reload中传url参数,且所有字段名须与后端严格对齐。

where 必须是函数,不能写死对象
直接写 where: {name: $('#name').val()} 是无效的——这个值只在 table.render() 初始化时取一次,后续输入变化完全不会更新。Layui 每次 reload 都会重新执行 where 函数,所以必须让它返回实时值。
正确写法是:
where: () => ({
q_name: $('#search-name').val().trim(),
status: $('#status-select').val(),
category_id: $('#category').val() || undefined
})
- 空字符串或
null建议显式转为undefined,避免后端收到无意义的q_name=参数 - 多个字段建议统一收口到一个函数里,别零散取值,容易漏判或拼错名
- 函数体内别调用
table.reload(),否则触发无限循环
搜索提交时必须重置 page.curr 为 1
用户在第 5 页点搜索,如果不手动重置,table.reload() 仍会带着 page=5 请求,导致后端查第 5 页的搜索结果——大概率为空。
搜索按钮 click 事件里要这样写:
table.reload('demo', {
where: () => ({ q_name: $('#search-name').val().trim() }),
page: { curr: 1 }
});
-
page: { curr: 1 }是关键,它让表格跳回第 1 页并重新加载 - 漏掉
page就等于没重置,这是最常导致“搜不到”的原因 - 如果用了自定义
pageName(如pageNum),curr: 1依然有效,Layui 会自动映射成对应参数名
动态换接口地址也得走 reload,config.url 不可赋值
想根据条件切换不同后端接口?别碰 tableIns.config.url = '/new' —— 这个属性是只读快照,改了也没用。
必须在 reload() 里显式传 url 参数:
table.reload('demo', {
url: '/api/v2/list',
where: () => ({ type: 'user', keyword: $('#kw').val() }),
page: { curr: 1 }
});
- 同时传
url、where、page,缺一不可,否则可能沿用旧配置 - 如果接口需要 POST + JSON,还得加
method: 'POST'和contentType: 'application/json',且where里传的是字符串(JSON.stringify({...})) - GET 请求下所有
where字段都拼在 URL 上,中文或特殊字符由 Layui 自动编码,别自己拼 URL
后端收不到参数?先看 Network 里的实际请求 URL
打开浏览器 Network 面板,点下一页或搜一下,看发出的请求地址里有没有你想要的参数。没有?大概率是字段名或编码问题。
- 确认 key 名是否和后端约定一致:比如是
q_name还是name_like,大小写敏感 - Spring Boot 用
@RequestParam接收时,GET 参数必须匹配 URL 中的 key;若用@RequestBody,前端必须设contentType且where传字符串 - 如果后端用的是
page_no=1&per_page=20,就在request里配pageName: 'page_no'、limitName: 'per_page'
真正复杂的地方不在参数多,而在于每个字段都得和后端接口文档对齐——少一个下划线、多一个空格,请求就静默失败。











