layui 的 laypage 默认不提供“跳转到首页”按钮，因其设计上将 first/last 按钮留作自定义扩展项；需在 layout 中手动插入 html 按钮并结合 laypage.skip() 或 table.page() 实现跳转。
为什么 layui 的 laypage 默认不提供“跳转到首页”按钮
layui 的分页组件 laypage 设计上只内置了上一页、下一页、页码列表和跳转输入框，first（首页）和 last（尾页）按钮需要手动扩展。它的 layout 配置项支持 'prev'、'page'、'next'、'count'、'limit'、'skip'，但没有 'first' 或 'home' —— 这不是遗漏，而是留给你按需定制的接口。
在 layout 中插入自定义按钮 HTML 并绑定事件
不能靠配置项直接启用，得在 layout 数组里塞一个字符串类型的自定义项，再用 jump 回调处理点击逻辑：
laypage.render({
elem: 'demo',
count: 100,
layout: ['count', 'prev', 'page', 'next', 'limit', 'skip', '<button type="button" class="layui-laypage-btn-first">首页</button>'],
jump: function(obj, first) {
if (!first) {
// 点击“首页”按钮时，obj.curr 是当前页，我们要强制跳到第 1 页
if ($(obj.elem).find('.layui-laypage-btn-first').is(':visible') && $(this).hasClass('layui-laypage-btn-first')) {
laypage.render({
elem: 'demo',
count: 100,
curr: 1, // 关键：重载并指定 curr=1
layout: obj.layout,
jump: obj.jump
});
}
}
}
});
更稳妥的做法是：不重 render，而是在 jump 外部单独绑定事件：
- 确保
layout里插入的 HTML 有唯一 class，比如class="laypage-go-first" - 在
laypage.render()执行后，用$(document).on('click', '.laypage-go-first', ...)绑定事件 - 点击时调用
laypage.render({ ..., curr: 1 })或更轻量的laypage.skip('demo', 1)（Layui 2.8+ 支持）
使用 laypage.skip() 实现无刷新跳首页（推荐）
Layui 2.8 起新增了 laypage.skip() 方法，它不触发完整重渲染，只更新页码显示和触发 jump 回调，适合高频操作：
laypage.render({
elem: 'demo',
count: 100,
layout: ['count', 'prev', 'page', 'next', 'limit', 'skip', '<button type="button" class="laypage-go-first">首页</button>'],
jump: function(obj, first) {
if (!first) {
// 这里只负责数据加载，比如重新请求第 obj.curr 页的数据
console.log('当前页：', obj.curr);
}
}
});
<p>// 单独绑定首页按钮
$(document).on('click', '.laypage-go-first', function() {
laypage.skip('demo', 1); // 第二个参数是目标页码
});</p>
注意点：
-
laypage.skip()的第一个参数必须是分页容器的 ID（即elem值），不是选择器 - 如果表格是用
table.render()驱动的，且开启了page: true，那它的分页由 table 内部管理，此时要操作的是 table 的id，不是 laypage 的容器 ID - 按钮样式需自行补全，Layui 不会自动为自定义 HTML 添加
layui-btn类，建议加：<button class="layui-btn layui-btn-primary layui-btn-xs laypage-go-first">首页</button>
表格（table.render）场景下怎么加首页按钮
如果你的表格是用 table.render() 创建的，并启用了内置分页（page: true），那么它的分页 DOM 是由 table 自动创建的，layout 配置要写在 table 的 page 选项里，而不是单独调 laypage.render()：
table.render({
elem: '#demo',
url: '/api/list',
page: {
layout: ['count', 'prev', 'page', 'next', 'limit', 'skip', '<button type="button" class="laypage-go-first-table">首页</button>'],
groups: 5
},
cols: [[ /* ... */ ]]
});
<p>// 绑定事件（注意：table 分页容器 class 是 .layui-table-page）
$(document).on('click', '.laypage-go-first-table', function() {
var $pageElem = $('.layui-table-page');
var ins = table.getIns('demo'); // 获取实例
ins.page({curr: 1});
});</p>
这里的关键是：ins.page({curr: 1}) 会触发 table 重新加载第 1 页数据，并同步更新分页栏显示 —— 它比直接操作 laypage 更安全，因为绕过了底层耦合细节。
容易忽略的是：table 的 page 配置中插入的 HTML，在每次翻页后会被重绘，所以事件必须用事件委托（$(document).on()），不能直接 $().click()。
