laypage.render 的 jump 回调是处理分页切换的唯一可靠方式,需过滤 first === true 避免重复执行;table.render 应用 done 回调而非 jump,且 limit 切换需手动监听 select change 并显式传参 reload。

laypage.render 的 jump 回调必须写对位置
分页切换后要执行自定义 JS,唯一可靠的方式是把逻辑写进 laypage.render 的 jump 回调里。这个回调在初始化渲染和后续翻页时都会触发,但注意:首次渲染时会带 first === true,你得手动过滤掉,否则会重复执行。
常见错误是把 JS 写在 laypage.render 外面、或者只监听点击事件——这些方式无法覆盖「跳页」「输入跳转」「limit 切换」等所有场景。
-
jump的第二个参数first是布尔值,true表示初始化渲染,false才代表用户主动翻页 - 不要在
jump里直接调用laypage.render(),否则会无限递归(比如你在里面又调一次laypage.render()) - 如果需要重新加载数据,建议封装成独立函数,比如
loadData(page, limit),然后在jump中调用
table.render 的 done 回调不是 jump
如果你用的是 table.render(表格组件),它的分页回调叫 done,不是 jump。这个回调在每次表格重载完成后触发,包含当前页码、每页条数和原始返回的 res 数据。
容易混淆的点:很多人以为 table.render 也走 jump,结果代码根本没执行。它压根不认 jump,只认 done。
-
done的三个参数:res(原始响应)、curr(当前页)、count(总条数) - 如果后端返回结构不标准(比如没包在
data字段里),done拿到的res可能是空对象或字符串,先console.log(res)确认结构 - 别在
done里再调table.reload(),除非你明确需要二次刷新——否则容易触发死循环
监听 limit 改变必须手动绑定 change 事件
table.render 的 limit 下拉框切换不会触发 page 事件,需在 done 回调中用 setTimeout 延迟监听 .layui-laypage-limits select 的 change 事件,并显式传入 newLimit 调用 table.reload() 重载。
- 分页器中每页条数的下拉框是动态生成的,class 为
layui-laypage-limits,里面有个select - 推荐做法:在
done回调里,用setTimeout(() => { ... }, 0)确保分页 DOM 已挂载;再用$(document).on('change', '.layui-laypage-limits select', ...)避免重复绑定 -
reload时必须显式传入limit,不能依赖当前实例状态——不传limit仍按初始化值请求
jump 里取页码要用 obj.curr,不是 obj.page
官方文档曾长期误写为 obj.page,实际可用字段是 obj.curr。网络面板里若发现分页请求缺参数或始终为第 1 页,大概率是这里写错了。
-
obj.curr是当前页码(数字),obj.limit是每页条数,两者应直接用于后端分页参数 - 首次渲染时
obj.curr === 1,但jump不会自动触发首次加载——所以你要在jump内判断!first后再发请求 - 若需带搜索条件,把条件变量闭包进
jump函数内,避免从全局取值导致状态不同步
jump 或 done,但触发时机、参数来源、是否需防重、是否要重置状态,全都不一样。漏掉任一路径,分页行为就可能“看起来没反应”。











