Layui动态搜索必须用reload()传where函数实时获取值,空值需过滤,点击搜索要重置page.curr=1,URL切换须在reload中传url参数,不可修改config.url。

layui动态搜索条件必须用 reload() 传 where 函数,不能写死对象
直接写 where: {name: $('#search-name').val()} 是无效的——这个值只在 table.render() 初始化时取一次,后续输入变化完全不会更新。Layui 每次 reload() 都会重新执行 where 函数,所以必须让它返回实时值。
正确写法是:
where: () => ({
q_name: $('#search-name').val().trim(),
status: $('#status-select').val()
})
- 空值要主动过滤:比如
$('#search-name').val().trim()为空时,整个字段不该传给后端,除非接口明确要求传空字符串 - 别在函数里调用
table.reload(),否则触发无限循环 - 多个搜索框建议统一收口到一个对象里再
return,避免零散取值出错
点击搜索按钮后必须显式 reload 并重置 page.curr = 1
表格本身不监听外部输入框,点搜索按钮后必须手动触发刷新,且页码要归 1,否则可能搜出“空结果”(实际数据在第 2 页但你还在看第 5 页)。
用实例方法:
tableIns.reload({
where: {q_name: $('#search-name').val().trim()},
page: {curr: 1}
})
用静态方法:
table.reload('tableId', {
where: {q_name: $('#search-name').val().trim()},
page: {curr: 1}
})
- 别漏掉
page: { curr: 1 },这是最容易被忽略却最常导致“搜不到”的原因 - 如果用了分页,
curr不能为undefined,建议兜底写成curr: tableIns.config.page.curr || 1 - 若想保留原页码(极少见),需先读取当前
table.config.page.curr,但要注意该值在reload前可能还没更新
多条件组合要动态构建,避免空值污染后端查询
直接把所有字段都塞进 where,空值也会传给后端,容易导致 SQL 查询出错或命中缓存异常。
推荐做法是用一个对象收集条件,每次 reload 前重新构建:
const params = {};
if ($('#keyword').val().trim()) params.keyword = $('#keyword').val().trim();
if ($('#status-select').val()) params.status = $('#status-select').val();
if ($('#begintime').val().trim()) params.begintime = $('#begintime').val().trim();
- 日期控件(如
laydate)返回的是字符串,注意格式是否匹配后端预期(2026-09-05还是2026/09/05) - 下拉框用
$('#status-select').val()获取值,null或''要跳过 - 如果用
form.on('submit(filter)')绑定搜索按钮,记得return false阻止默认提交,否则页面会刷新
动态换接口地址也得走 reload,config.url 不可赋值
想根据搜索条件切换不同后端接口?别碰 tableIns.config.url = '/new',这个属性是只读快照,改了也没用。
必须在 reload() 里显式传 url 参数:
tableIns.reload({
url: '/api/v2/list',
where: params,
page: {curr: 1},
initSort: {field: 'id', type: 'desc'}
})
- 同时传
url、where、page、initSort(如果支持排序),缺一不可,否则表头排序状态可能丢失 - 后端用
@RequestParam接收时,GET 请求的参数必须匹配 URL 中的 key;如果是 POST + JSON,需额外配置contentType: 'application/json'和method: 'POST' - Spring Boot 中若用
@RequestBody接收整个 JSON,前端必须设contentType,且where里传的是字符串而非对象


















