讲师中心 微信公众号
AI工具推荐 视频效率加速

layui分页怎么在分页结束后执行自定义JS

陌婷大大_8766

陌婷大大_8766

发布时间:2026-08-24 10:41:12

|

862人浏览过

|

来源于php中文网

原创

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

layui分页怎么在分页结束后执行自定义js

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 可能尚未更新完毕。

arcgis-js
arcgis-js

提供 ArcGIS Maps SDK for JavaScript 开发辅助,涵盖 2D/3D 地图视图、图层管理、数据可视化、空间分析等功能模块的参考和示例指导。

下载

典型表现:你在 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 下拉框」三种操作都试一遍。

热门AI工具

更多
蛙蛙写作

一款AI论文写作工具,主要用于超级AI智能写作助手,适合需要提升相关任务效率的用户。

火山引擎

火山引擎是一款面向企业的云计算与AI服务平台。

AionClaw
AionClaw Hot

AionClaw是一款面向办公、创作和编程任务的AI桌面智能体。

WorkBuddy

一款AI办公效率工具,主要用于腾讯云推出的AI原生桌面智能体工作台,适合需要提升相关任务效率的用户。

Loomy
Loomy Hot

一款AI工具,主要用于科大讯飞发布的桌面级 AI 助理,比 OpenClaw 更易用、更安全!,适合需要提升相关任务效率的用户。

超级麦吉

一款通过数字员工协作完成调研、数据分析与文档制作的AI办公平台。

SkildArt
SkildArt Hot

SkildArt是一款AI文本写作工具,一站式 AI 视觉创作平台。

DeepSeek

DeepSeek是一款面向对话、写作、编程和推理场景的AI大模型工具。

豆包大模型

豆包大模型是一款由字节跳动推出的企业级大语言模型服务平台。

相关专题

更多
ajax教程
ajax教程

php中文网为大家带来ajax教程合集,Ajax是一种用于创建快速动态网页的技术。通过在后台与服务器进行少量数据交换,Ajax可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新。php中文网还为大家带来ajax的相关下载资源、相关课程以及相关文章等内容,供大家免费下载使用。

3100

2023.06.14

ajax中文乱码解决方法
ajax中文乱码解决方法

ajax中文乱码解决方法有设置请求头部的字符编码、在服务器端设置响应头部的字符编码和使用encodeURIComponent对中文进行编码。本专题为大家提供ajax中文乱码相关的文章、下载、课程内容,供大家免费下载体验。

360

2023.08.31

ajax传递中文乱码怎么办
ajax传递中文乱码怎么办

ajax传递中文乱码的解决办法:1、设置统一的编码方式;2、服务器端编码;3、客户端解码;4、设置HTTP响应头;5、使用JSON格式。本专题为大家提供相关的文章、下载、课程内容,供大家免费下载体验。

2913

2023.11.15

ajax网站有哪些
ajax网站有哪些

使用ajax的网站有谷歌、维基百科、脸书、纽约时报、亚马逊、stackoverflow、twitter、hacker news、shopify和basecamp等。本专题为大家提供相关的文章、下载、课程内容,供大家免费下载体验。

1161

2024.09.24

Gradle插件开发入门教程
Gradle插件开发入门教程

本专题介绍Gradle插件开发的基本流程,涵盖插件类编写、自定义任务注册、扩展参数设计和插件应用方法,帮助你理解插件如何组织构建逻辑,减少多个项目之间的重复配置。

120

2026.10.22

Gradle Wrapper配置教程
Gradle Wrapper配置教程

本专题介绍Gradle Wrapper的基本作用,涵盖文件组成、生成方法、版本配置和任务调用,帮助你理解项目如何使用指定的Gradle版本,减少不同开发环境带来的构建差异。

60

2026.10.22

Golangci-lint检查器使用教程
Golangci-lint检查器使用教程

本专题整理Golangci-lint常用Linters的用途与配置方法,覆盖错误处理、无效代码、安全、复杂度、命名和依赖检查,帮助项目合理选规则。

60

2026.10.22

Gradle怎么构建Java项目
Gradle怎么构建Java项目

本专题介绍Gradle Java项目构建方法,涵盖Java插件配置、依赖声明、源码编译、测试执行和打包检查,帮助你理解各阶段的任务关系,逐步完成项目构建。

40

2026.10.22

PHP时间戳漏洞修复教程
PHP时间戳漏洞修复教程

本专题汇总PHP常见时间戳漏洞,包括2038年溢出、时区漂移、时间戳伪造、重放攻击、时间盲注与日志审计失效等,并给出升级64位环境、使用 DateTimeImmutable、统一UTC、严格超时校验、预处理绑定、hash_equals 比对等修复方案,帮助开发者快速排查和加固时间相关代码。

60

2026.10.22

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
第十三期_前端开发
第十三期_前端开发

共98课时 | 17.9万人学习

第十二期_前端开发
第十二期_前端开发

共98课时 | 20.9万人学习

周末班(第一期)_前端开发
周末班(第一期)_前端开发

共83课时 | 15.2万人学习

关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn