最可靠方式是调用 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 实例，导致跳转按钮点了没反应。
