唯一可靠方式是将自定义JS写入laypage.render的jump回调并过滤first===true;table.render分页回调为done而非jump;DOM操作需延迟或事件委托;参数名修改不影响obj.curr等值。

laypage.render 的 jump 回调必须写对位置
分页切换后要执行自定义 JS,唯一可靠的方式是把逻辑写进 laypage.render 的 jump 回调里。这个回调在初始化渲染和后续翻页时都会触发,但注意:首次渲染时会带 first === true,你得手动过滤掉,否则会重复执行。
常见错误是把 JS 写在 laypage.render 外面、或者只监听点击事件——这些方式无法覆盖「跳页」「输入跳转」「limit 切换」等所有场景。
-
jump的第二个参数first是布尔值,true表示初始化渲染,false才代表用户主动翻页 - 不要在
jump里直接调用render(),否则会无限递归(比如你在里面又调一次laypage.render) - 如果需要重新加载数据,建议封装成独立函数,比如
loadData(page, limit),然后在jump中调用
table.render 分页后的回调不是 jump,而是 done
如果你用的是 table.render(表格组件),它的分页回调叫 done,不是 jump。这个回调在每次表格重载完成后触发,包含当前页码、每页条数和原始返回的 res 数据。
容易混淆的点:很多人以为 table.render 也走 jump,结果代码根本没执行。它压根不认 jump,只认 done。
-
done的三个参数:res(原始响应)、curr(当前页)、count(总条数) - 如果后端返回结构不标准(比如没包在
data字段里),done拿到的res可能是空对象或字符串,先console.log(res)确认结构 - 别在
done里再调table.reload(),除非你明确需要二次刷新——否则容易触发死循环
自定义跳转后 DOM 更新延迟问题
分页完成、回调执行了,但你操作的 DOM 元素还没渲染出来?这是因为 layui 的渲染是异步的,jump 或 done 触发时,DOM 可能尚未更新完毕。
典型表现:你在 jump 里写 $('#my-list li').length,结果还是旧数量;或者想给新插入的行加 click 事件,发现绑定失效。
- 安全做法:用
setTimeout延迟 10–30ms 再操作 DOM,例如setTimeout(() => { /* DOM 操作 */ }, 16) - 更稳妥的方式是监听
layui.table.on('done(test)')这类事件(需提前给 table 设id: 'test'),它比done回调稍晚一点触发 - 事件委托永远比直接绑定更可靠,比如用
$(document).on('click', '.item-btn', handler)替代$('.item-btn').on('click', handler)
page 参数名被改过时 jump 不会自动识别
如果你通过 request: { pageName: 'pageNum', limitName: 'pageSize' } 修改了分页参数名,jump 回调里的 obj.curr 和 obj.limit 依然有效——它们是 laypage 内部计算后的值,不受后端参数名影响。
但很多人误以为要自己解析 URL 或表单,其实不用。只要 table.render 配置了正确的 request,done 里的 curr 就是真实当前页,obj.curr 在 jump 里也一样。
- 真正影响
jump的只有elem、count、limit这几个基础参数,后端字段名改不改,都不影响回调参数结构 - 唯一例外:如果你手写 AJAX 并手动传参(没走
table.url),那就要确保请求里带对参数,否则jump里的obj.curr和实际后端收到的不一致 - 调试技巧:在
jump里console.log(obj),看curr、limit、count是否符合预期,比查网络请求更快
跳页动作本身是轻量的,但回调时机、DOM 状态、参数映射这三处最容易出错。写完记得用「输入页码跳转」「点省略号」「切 limit 下拉框」三种操作都试一遍。











