最常见原因是前后端字段名不一致,如前端传keyword而后端需title_like;需检查Network确认参数名、确保cols字段与后端返回键名完全一致、toolbar事件需显式监听、reload时必须重置page.curr为1且ID严格匹配。

搜索时后端收不到 keyword 字段
最常见原因是 where 里传的 key 和后端接口约定不一致。Layui 不做任何字段映射或转换,你传 { keyword: 'xxx' },后端就必须明确接收 keyword 这个参数名。如果后端实际要的是 title_like 或 q,那搜索就必然“找不到”。
检查方式很简单:打开浏览器 Network 面板,点搜索后看请求 URL 或 Payload 里到底带了什么参数。别猜,直接看。
- 后端要求
title_like→ 你就得写where: { title_like: val } - 后端区分大小写(如
UserId)→ 前端不能写成userid或user_id - 中文关键词没被识别?先确认是否漏了
encodeURIComponent()—— 虽然table.reload()内部会处理,但如果你手动拼 URL 就得自己编码
前端写了 keyword 却查不到对应列数据
不是字段传丢了,而是 cols 配置里没定义这个字段,导致 Layui 渲染时压根不认它。比如后端返回了 { id: 1, name: '张三', extra_info: 'VIP' },但你的列只写了:
[{ field: 'id' }, { field: 'name' }]
那 extra_info 就不会出现在任何行数据中,checkStatus() 拿不到,搜索条件也匹配不上(哪怕你在 where 里传了它)。
- 确保
cols中每个field都和后端返回的键名完全一致(包括下划线、驼峰、大小写) - 不想显示但需要参与搜索或选中?加
hide: true即可:{ field: 'extra_info', hide: true } - 字段含短横线(如
create-time)?field写成'create-time',渲染时用templet: function(d) { return d['create-time']; }
搜索框在 toolbar 里但始终没绑定上事件
toolbar 区域只是个 HTML 容器,Layui 不自动解析里面按钮的行为。你放了个 <button lay-event="search">,却没监听 toolbar(*) 事件,点击就真的什么都不会发生。
- 必须显式监听:
table.on('toolbar(yourTableId)', function(obj){ ... }),括号里的 ID 必须和table.render({ id: 'yourTableId' })严格一致 - 别漏掉
obj.event === 'search'判断,否则所有 toolbar 操作都会走同一段逻辑 - 如果用了
form.on('submit(*)'),记得return false阻止页面刷新 —— 否则表单一提交,整个页面就跳走了
搜索后表格数据不变,控制台也没报错
大概率是 table.reload() 没重置页码,或者传错了表 ID。用户在第 5 页点搜索,结果还是查第 5 页的数据,自然为空;而 Cannot read property 'config' of undefined 这类错误,说明你 reload 的 ID 根本没 render 过。
- 每次
reload都必须带page: { curr: 1 },这是硬性要求,不是可选项 - ID 大小写敏感:
table.reload('UserTable')和id: 'usertable'不匹配 - 别复用同一个变量名存多个表格实例,ID 冲突会导致 reload 指向错误目标
真正容易被忽略的是:多条件搜索时,空值字段(比如未选的下拉框、未填的日期)如果也被塞进 where,后端可能当成有效条件过滤掉全部数据。动态构建 where 对象,只加非空项,比写死安全得多。


















