table.on('page(id)') 是监听手动跳页的唯一可靠方式,需用初始化时指定的 id 监听,obj.curr 为校验后的真实页码,跳转框需在 page.layout 中显式添加 'jump' 且置于末尾,程序化跳转应使用 table.reload() 并传入 page.curr 整数。

table.on('page(id)') 是监听手动跳页的唯一可靠方式
layui 表格的手动输入页码(包括回车、点击「跳转」按钮)最终都会触发 table.on('page(id)') 事件,而不是原生 keydown 或 input。因为分页跳转框是动态生成的,且 layui 内部接管了所有交互逻辑——你绑的事件要么查不到元素,要么被覆盖或触发时机错乱。
必须用初始化时指定的 id(比如 elem: '#userTable' 对应 id 就是 'userTable')来监听:
table.on('page(userTable)', function(obj){
console.log('已跳转到第', obj.curr, '页,每页', obj.limit, '条');
// 这里发起新页数据请求
});
-
obj.curr是校验后的真实页码(整数),不是输入框原始字符串 - 不需要判断是否为数字或做
parseInt,layui 已处理非法输入(如空、负数、超界)并 fallback 到合法值 - 若需区分“用户主动跳转”和“初始化”,可在
table.render()时加where: { _init: true },再在page回调里检查obj.curr === 1 && !obj.where?._init
跳转框不显示?检查 page.layout 是否含 'jump'
默认情况下,layui 表格的右侧跳转输入框是隐藏的。必须显式在 page.layout 中加入 'jump',且放在数组末尾:
page: {
layout: ['count', 'prev', 'page', 'next', 'limit', 'jump'] // ✅ 正确顺序
}
- 漏掉
'jump'→ 输入框完全不渲染 -
'jump'放在中间(如['jump', 'prev'])→ 布局错乱或被截断 - 容器宽度不足(尤其小屏或父级
overflow: hidden)→ 元素存在但不可见,检查 DOM 中是否有<div class="layui-laypage-jump"> - 总页数 ≤ 1(
count / limit ≤ 1)→ layui 自动隐藏跳转框,此时加'jump'也无效
想跳到指定页?别碰 DOM,用 table.reload()
要程序化跳转(比如搜索后回到第 1 页,或按钮点击跳到第 5 页),绝对不要操作 .layui-laypage-skip input 的 value 再触发 click —— 这是 DOM 层 hack,不稳定,且在 layui 2.9+ 版本中可能失效。
正确做法是调用 table.reload() 并传入 page.curr:
table.reload('userTable', {
where: { keyword: 'xxx' },
page: { curr: 5 }, // ⚠️ 必须是数字,不能是字符串 "5"
limit: 10
});
-
page.curr必须是整数,传字符串会导致静默失败(页码不变) - 必须同时传
limit,否则分页器可能显示异常(如页码数量错乱) - 如果只改
where不传page,layui 会沿用当前页码,后端收到的仍是旧页码 - 多次快速点击搜索按钮时,建议加节流(如用
isReloading标志位锁住)防止并发覆盖
jump 回调里加载数据,first 参数必须判
如果你用的是底层 laypage.render() 而非 table.render(),它的 jump 回调会在首次渲染和每次跳页时都执行。不判 first 会导致第 1 页数据被请求两次。
laypage.render({
elem: '#page',
count: 100,
limit: 10,
curr: 1,
jump: function(obj, first) {
if (!first) { // ✅ 只在用户操作后加载
$.get('/api/list?page=' + obj.curr + '&limit=' + obj.limit);
}
}
});
-
first是布尔值,true表示这是初始化渲染,false表示用户触发的跳页 - 别在
jump里直接改curr或调laypage.render(),这会引发无限循环 -
obj.curr和obj.limit是实时值,直接用于后端分页参数,不要硬编码page=1
layout 配置、容器尺寸、页数计算三者同时满足;而跳页行为的可靠性,取决于你是否绕开了 DOM 操作,真正用对了 table.reload() 或 table.on('page()') 这两个官方通道。


















