分页和搜索必须共用同一套动态请求参数,搜索时需更新全局 searchParams 并调用 table.reload({where: searchParams, page: {curr: 1}}),否则翻页将丢失搜索状态。

分页和搜索必须共用同一套请求参数,否则搜索后翻页会回到原始数据。Layui 的 table.render() 本身不自动维护搜索状态,每次翻页都默认重发初始请求 —— 这是最常被忽略、导致功能“看似能用实则失效”的根本原因。
table.render 中 where 参数必须动态更新
搜索输入后,不能只靠前端 filter 数据(那会丢失分页能力),而要把关键词作为请求参数传给后端。关键在于:where 对象必须在搜索触发时实时变更,并确保后续所有分页请求都携带它。
- 把搜索条件存到一个全局对象里,比如
let searchParams = { keyword: '', category_id: '' }; - 搜索框
input触发oninput时,更新searchParams.keyword,然后调用table.reload() -
table.reload()必须显式传入where: searchParams,否则它会沿用初始化时的旧值 - 不要在
table.render()的初始配置里写死where: { keyword: 'xxx' }—— 那样 reload 时不会自动继承
reload 时 page.curr 必须重置为 1
用户搜完再翻页,逻辑上应从第一页开始展示匹配结果。若不重置,page.curr 仍为上次的 3 或 5,会导致返回空数据或错乱。
-
table.reload()调用时必须加page: { curr: 1 } - 否则 Layui 会默认沿用当前页码,而后端没做兜底时直接返回 0 条
- 如果需要保留“搜索后继续翻页”的体验,得让后端支持带 keyword 的分页查询,前端 reload 时不重置 curr,但首次搜索必须重置
form.on('submit(…)')里不能直接 reload
用 Layui 表单提交搜索时,form.on('submit(searchForm)') 默认会刷新页面。即使你 return false,若在回调里只调用 table.reload() 而没同步更新 where 和 page.curr,一样无效。
- 务必在 submit 回调里手动收集表单值,更新
searchParams - 显式调用
table.reload({ where: searchParams, page: { curr: 1 } }) - 别依赖
form.val('searchForm')直接塞进 where —— 它返回的是 DOM 值快照,不是响应式数据
真正麻烦的不是写几行代码,而是所有 reload 动作都得“带参数、重页码、同步状态”。漏掉任意一环,搜索和分页就变成两个独立操作,用户搜完点下一页,数据就消失了。


















