最可靠方式是调用 laypage.render() 并传入含新 curr 的完整配置对象;若用 table.render(),应优先 table.reload() 并设 page.curr;jump 回调中需判 !first 且校验页码边界。

layui 的 laypage.render() 怎么触发跳转?
layui 分页跳转不是靠手动改 URL 或刷新页面,而是通过 laypage.render() 返回的实例调用 skip() 方法主动跳转。你得先保存渲染后的实例,否则后续没法控制。
常见错误是每次点击“跳转”按钮都重新 laypage.render() 一遍,结果页码重置、事件重复绑定、甚至报 TypeError: laypage is not a function —— 因为重复初始化会污染内部状态。
- 渲染时必须指定唯一
id,比如id: 'demo',否则laypage.getInstance('demo')拿不到实例 - 跳转前确保当前页码合法:不能小于 1,不能大于
count / limit向上取整后的总页数 -
skip(page)是同步触发jump回调,但不会自动重载数据 —— 数据加载必须在jump里显式写
怎么在跳转输入框里按回车或点按钮触发跳转?
layui 不提供内置跳转输入框,得自己加 HTML 控件,再绑定事件。关键点是:别用 form.on('submit', ...) 包整个表单,容易误触;直接监听按钮 click 或 input 的 keypress 更稳。
示例逻辑:
<input type="number" id="jumpInput" min="1" placeholder="页码">
<button id="jumpBtn">跳转</button>
<script>
const pageIns = laypage.render({
elem: 'demo',
count: 100,
limit: 10,
curr: 1,
id: 'demo',
jump: function(obj, first) {
if (!first) {
// 这里发请求加载第 obj.curr 页的数据
loadData(obj.curr);
}
}
});
document.getElementById('jumpBtn').onclick = function() {
const val = parseInt(document.getElementById('jumpInput').value);
const totalPage = Math.ceil(100 / 10);
if (val >= 1 && val <= totalPage) {
pageIns.skip(val);
} else {
layer.msg('页码超出范围');
}
};
// 回车支持
document.getElementById('jumpInput').onkeypress = function(e) {
if (e.key === 'Enter') {
e.preventDefault();
document.getElementById('jumpBtn').click();
}
};
</script>
为什么 jump 回调里要判断 !first?
因为 laypage.render() 初始化时会立即执行一次 jump(first === true),这是为了渲染初始页码。如果你没加判断,就会在页面加载时多发一次无意义的数据请求。
-
first是 layui 内部传入的布尔值,只在初始化时为true,之后所有跳转(包括skip()、点击页码、上一页/下一页)都是false - 漏掉这个判断,可能导致接口被调两次:一次初始化,一次真实跳转
- 如果后端分页依赖
page参数,而首次请求传了page=0或未传,可能返回空数据或报错
跳转后如何保持当前页码高亮并更新显示?
不用手动操作 DOM。laypage.render() 内部会自动更新页码容器里的 .layui-laypage-curr 类和文本内容。但前提是:你没用自定义 layout 覆盖掉默认结构,也没用 CSS 强制隐藏/重置样式。
容易被忽略的坑:
- 用了
layout: ['count', 'prev', 'page', 'next', 'limit', 'refresh', 'skip']却漏了'page',导致页码数字区域不渲染,自然无法高亮 - 自定义
groups(如设为 3)后,跳转到边缘页码(比如第 1 页或最后一页)时,页码条可能“卡住不动”,其实是分组逻辑限制了显示范围 —— 这不是 bug,是预期行为 - 如果跳转后页码没变,先检查
curr是否被写死(比如始终传 1),或者skip()传入了非法值(非数字、NaN、负数)导致静默失败
jump 外面,又忘了在 skip() 前手动调一次;或者压根没存 pageIns 实例,导致跳转按钮点了没反应。


















