应在表格容器内、标签前用layui-form包裹搜索表单，各控件设name属性，通过form.val('filter')获取全部字段并传入table.reload()的where参数，同时显式重置分页page: {curr: 1}。
怎么在表格上方放一个带多个条件的搜索表单
直接把表单写在 <table> 标签前面，用 <code>layui-form 包裹，加 class layui-form-pane 或 layui-row 控制布局。别塞进 toolbar 里——那是为按钮/操作设计的，放复杂表单会错位、样式难控、响应不一致。
关键点：
- 表单必须放在表格容器（比如
<div id="table-container">）内部，且在 <code><table> 标签之前，否则 CSS 定位和事件流容易出问题 <li>每个输入控件必须有 <code>name属性，如name="username"、name="status"，后续取值才可靠 - 日期范围、下拉选择等组件要单独初始化（
laydate.render()、form.render('select')），不能只靠 HTML 属性 - 避免在表单里用
lay-submit直接触发提交，优先监听form.on('submit(filter)')，方便统一收集参数
form.on('submit') 怎么拿到所有字段并传给 table.reload()
别手动一个个 $('#xxx').val() ——容易漏、难维护。用 form.val('formFilterName') 一次性取全部，它返回一个对象，键就是 name 值，值就是当前输入内容。
示例逻辑：
form.on('submit(tableSearch)', function(data){
var params = data.field; // 自动提取所有 name 对应的值
// 过滤空值（可选）
Object.keys(params).forEach(key => {
if (params[key] === '' || params[key] == null) delete params[key];
});
table.reload('userTable', {
where: params,
page: { curr: 1 }
});
return false; // 阻止页面跳转
});
注意：data.field 是干净的对象，不含文件、disabled 字段；如果某输入框被动态禁用，它的值不会出现在 data.field 中。
为什么 reload 后表格没变化或分页错乱
最常见原因是 where 参数字段名和后端接口要求不一致，或者没重置分页。Layui 不会自动校验字段合法性，传错就等于没传。
排查清单：
- 打开浏览器 Network 面板，看 reload 触发的请求 URL 中
where参数是否出现、值是否正确（中文要 URL 编码） - 确认后端接收字段名（如
user_namevsusername），大小写、下划线必须完全匹配 -
page: { curr: 1 }必须显式写，否则用户在第 5 页搜，结果仍从第 5 页开始，可能为空 - 如果用了服务端分页，确保接口返回的
count字段是按新条件计算的总数，否则分页器显示错误 - 检查
response配置是否与接口实际返回结构一致（如data、msg、count字段名）
多条件组合搜索时如何避免参数污染
每次 table.reload() 都会覆盖上一次的 where，但如果你在不同事件中多次调用（比如一个按钮清空、一个按钮搜索），容易把旧条件带进去。
安全做法是：始终基于当前表单状态生成全新 where，而不是“合并”或“追加”。不要做：
// ❌ 错误：缓存了旧 where，导致残留
var cachedWhere = {};
form.on('submit(...)', function(){
$.extend(cachedWhere, data.field);
table.reload(..., { where: cachedWhere });
});
应该做：
// ✅ 正确：每次都重新取、重新构造
form.on('submit(...)', function(data){
var freshParams = form.val('searchForm'); // 或 data.field
table.reload('userTable', { where: freshParams, page: { curr: 1 } });
});
另外，如果需要“清空搜索”，不要传空对象 {}，而是显式传 { keyword: '', status: '', ... }，让后端明确知道哪些条件要重置为无限制。
复杂点在于表单控件类型混杂（日期、多选 select、开关 switch），它们的值格式不统一，form.val() 返回的未必是后端想要的类型。比如日期组件返回字符串，而接口可能要求时间戳；多选 select 返回数组，但后端可能期望逗号分隔字符串——这些转换必须在 submit 回调里手动处理，不能依赖框架自动适配。
