laypage.render() 不支持自动携带搜索条件,所有带条件的请求必须在 jump 回调中手动拼接并发送;需用闭包捕获实时搜索参数,配合 first 判断避免重复请求,搜索后应销毁旧实例并用新 curr 和 count 重建分页器。

laypage.render() 本身不支持搜索条件,得靠 jump 回调手动拼接
laypage 是纯前端分页器,它不发请求、不管参数、也不认识“搜索”——所有带条件的请求都得你在 jump 里自己写。它只负责算页码、渲染按钮、触发回调。
常见错误是以为给 where 或 data 参数就能自动带上搜索字段,但 laypage.render() 根本没有这些配置项。你传了它也直接忽略。
- 搜索条件必须提前存好(比如存在闭包变量、全局对象或表单 DOM 值里)
-
jump触发时,把当前页码obj.curr和搜索条件一起塞进 AJAX 请求 - 别在
jump外部另起一套“点击搜索就 reload”的逻辑——那会和 laypage 的首次渲染冲突
jump 里怎么安全读取并传递搜索条件
最容易出错的是条件读取时机不对:用户还没输完你就去取值,或者表单被重置后还用旧 DOM 引用。关键是要让搜索条件“活”在 jump 函数作用域内。
- 推荐用闭包捕获表单值:
const searchParams = { keyword: $('#keyword').val(), status: $('.status-select').val() };,然后在jump里直接用 - 避免每次
jump都重新查 DOM,尤其在快速翻页时,DOM 查询可能滞后或报null - 如果搜索条件来自动态表单(如多选、日期范围),确保
val()返回的是后端能识别的格式(例如日期选中 '2026-09-06' 而不是 '2026/09/06') - 空值要显式过滤:
if (!searchParams.keyword) delete searchParams.keyword;,防止后端把空字符串当有效条件
为什么不能在 jump 里无脑发请求?first 参数必须判断
jump 不是“点哪页才触发”,它会在初始化渲染、点击页码、输入跳转页、甚至 limit 改变时都执行。第一次渲染时 first === true,这时 laypage 已经帮你触发了一次第 1 页的数据加载——如果你没拦住,就会重复请求两次第 1 页。
- 正确模式:
jump: function(obj, first) { if (!first) { loadData(obj.curr, obj.limit, searchParams); } } -
first是布尔值,只在初始渲染时为true,后续任何交互都是false - 别写成
if (first === false),JS 里first可能是undefined(某些旧版 layui),直接用!first更稳妥 -
obj.limit是当前每页条数,别硬编码成 10;用户切到 20 条/页时,你的请求参数也得跟着变
搜索后想重置页码?别动 laypage,改 curr 并 reload 数据就行
用户搜完想回到第 1 页,不是去调 laypage.skip(1) 或改 curr 配置,而是重新调一次 laypage.render(),把 curr: 1 和新搜索条件一起传进去。注意:这不是“刷新分页器”,而是重建实例。
- 先销毁旧实例:
if (window.pageInst) window.pageInst.destroy(); - 再重新 render:
window.pageInst = laypage.render({ elem: 'pagination', count: total, curr: 1, limit: 10, jump: ... }); -
count必须是新搜索条件下的总条数,不能沿用旧值,否则分页器显示错乱(比如搜出来只有 3 条,却显示“共 123 条,1/13 页”) - 如果后端返回的是分页数据 + 总数(如
{ data: [...], count: 42 }),记得把count提出来更新到 render 配置里











