laypage.render()的jump回调必须显式定义,否则点击页码等操作无响应;回调签名固定为jump: function(obj, first),需用!first过滤首次渲染以避免重复请求,且elem参数不能带#号。

laypage.render() 的 jump 回调必须显式定义
跳转功能不是默认开启的“开关”,而是靠 jump 回调函数驱动的——没有它,页码 DOM 会渲染出来,但点击页码、输入跳转值、点“下一页”全都不触发任何逻辑。
常见错误是只写 elem 和 count 就以为完事了,结果页面上页码可点,点完毫无反应。本质是没告诉 laypage “点完之后该干什么”。
-
jump函数必须存在,哪怕先写个console.log(obj.curr)验证通路 - 回调签名固定为
jump: function(obj, first) { ... },漏掉first参数会导致首次渲染误判 - 不要在
jump外部手动调用数据加载;所有分页动作(含初始化)都走这个入口
jump 里要区分 first 避免重复请求第 1 页
laypage 在首次渲染时会自动调一次 jump,first 为 true;后续点击页码、输入跳转、切换每页条数时,first 为 false。这是唯一可靠的判断依据。
如果忽略 first,直接在 jump 里发 AJAX,就会出现:页面一打开,第 1 页数据被拉两次——一次是 render 自动触发,一次是你自己写的初始化加载。
- 正确写法:
if (!first) { loadData(obj.curr, obj.limit); } - 首次渲染的数据应在
jump外单独加载,或把初始化逻辑也塞进jump但加if (first)分支处理 - 别依赖全局变量判断“是不是第一次”,状态容易错乱;
first是 laypage 传来的确定信号
elem 参数不能带 # 号,否则 jump 根本不执行
报错 Uncaught TypeError: Cannot read property 'innerHTML' of null 是跳转失效最常卡住的地方。根源就是 elem: '#pagination' 写错了。
laypage 不解析 CSS 选择器,elem 只接受两种值:'pagination'(字符串 ID 名)或 document.getElementById('pagination')(DOM 对象)。传 '#pagination' 会被当纯字符串,document.getElementById('#pagination') 必然返回 null,整个 render 失败,jump 自然不会被注册。
- 检查浏览器控制台有没有这个报错,有就立刻改
elem - 推荐统一用 ID 字符串写法:
elem: 'pagination',简洁不易错 - 如果容器是动态创建的,确保 render 前 DOM 已挂载,否则也会得
null
table 模块的分页跳转和 laypage 不是一回事
如果你用的是 layui.table,它的“跳转”由 page: true + url 驱动,和 laypage.render() 无关。别混用。
table 的分页跳转实际是:用户点页码 → table 自动拼 url?page=2&limit=10 → 发请求 → 拿到新数据后重绘表格。这个过程不需要你写 jump,但必须满足几个硬条件:
- 删掉
data字段,否则强制本地分页,跳转不发请求 - 后端响应必须含
count字段且code === 0,否则分页栏直接不显示 - 确认 Network 面板里切换页码时真有请求发出,没请求 = 配置被
data或参数名不匹配拦住了
真正容易被忽略的是:laypage 和 table 的分页机制完全独立,一个页面可以同时存在两者,但它们之间不通信、不联动——你要跳转 table,不能去操作 laypage 的 render 实例。











