最可靠的方式是调用laypage.render()重渲染或table.reload()跳转;二者均需同步状态,不可直接改变量或DOM;必须校验页码边界并确保配置完整。

最可靠的方式是调用 laypage.render() 重渲染并传入含新 curr 的完整配置对象;若你用的是 table.render() 渲染的表格,应优先走 table.reload() 并设置 page.curr——这两种方式都绕不开「状态同步」这个核心问题,直接改变量或操作 DOM 输入框属于临时补救,容易失效。
用 laypage.render() 跳转指定页(适用于纯分页场景)
layui 不允许修改已渲染实例的内部 curr 值,必须重绘才能同步 UI 与逻辑。关键不是只换 curr,而是保留原始配置中所有必要字段:
-
count和limit必须与原始一致,否则总页数计算错误,跳转后显示页码和实际数据错位 -
elem必须指向同一个容器(如'#page'),否则会新建一个分页栏,旧的还在页面上 - 如果原配置用了
jump回调,重渲染时也要传进去,否则点击页码不触发数据加载 - 不要写
laypage.render({ elem: '#page', curr: 5 })—— 缺少count和limit会导致崩溃或静默 fallback 到第 1 页
示例正确写法:
const config = {
elem: '#page',
count: 200,
limit: 20,
curr: 1,
jump: function(obj) {
// 加载第 obj.curr 页数据
}
};
laypage.render(config);
// 跳到第 5 页:
laypage.render(Object.assign({}, config, { curr: 5 }));
用 table.reload() 跳转指定页(推荐用于表格)
如果你的表格是通过 table.render() 初始化、且启用了 page: true,就别碰 laypage。表格组件自己管理分页状态,table.reload() 才是唯一安全通道:
- 必须传入表格初始化时的
id字符串(不是元素 ID,是table.render({ id: 'userTable' })中的'userTable') -
page.curr必须是整数,"3"这种字符串会导致跳转静默失败,控制台无报错 - 如果表格启用了服务端分页,
curr会自动拼进请求参数(如?page=5&limit=10) - reload 后页码没变?检查是否在
done回调里又调了一次table.reload(),形成覆盖
示例:
// 初始化时设了 id: 'userTable'
table.render({
elem: '#userTable',
url: '/api/users',
page: true,
id: 'userTable'
});
// 后续跳到第 3 页:
table.reload('userTable', {
page: { curr: 3 }
});
手动触发跳页输入框(仅应急)
当封装层阻断了 API 访问(比如第三方框架把 table 实例藏起来了),可模拟用户行为:
- 先找到跳页输入框:
$('.layui-laypage-skip input'),设val(5) - 再触发旁边的按钮:
$('.layui-laypage-skip .layui-laypage-btn').click() - 注意:这个按钮类名在不同版本可能为
.layui-laypage-btn或.layui-laypage-btn-jump,需 inspect 确认 - 该方式不触发
jump回调,也不保证数据加载,仅改变 UI 显示,务必配合后续 reload 或 AJAX 请求
跳转前必须校验页码边界
curr 超出范围时,layui 行为不一致且无提示:
-
laypage.render()会静默 fallback:若curr > 总页数,自动显示最后一页,但jump不触发,UI 显示“5/5”而你以为跳到了第 10 页 -
table.reload()则更隐蔽:若curr超限,它直接忽略该值,页码不动,Network 里仍发?page=10,后端可能返回空数据 - 校验必须在调用前做:
const maxPage = Math.ceil(count / limit); const safeCurr = Math.min(Math.max(1, curr), maxPage); - 如果
count来自后端响应(如done回调里的res.count),校验不能放在初始化时,得等回调执行完再算
真正容易被忽略的是:跳页输入框回车时,obj.curr 是字符串,parseInt(obj.curr, 10) 必须做,否则 Math.min("100", 5) 得到的是 "100"(字符串比较),不是数字 5。


















