分页组件
分页组件
分页组件 laypage 提供了前端的分页逻辑，使得我们可以很灵活处理不同量级的数据，从而提升渲染效率。
示例
自定义主题
自定义文本
不显示上一页、下一页
只显示上一页、下一页、当前页
自定义排版
自定义每页条数的选择项
完整显示
高级 - 开启 HASH
高级 - 将一段已知数组分页展示
API
API
描述
var laypage = layui.laypage
获得 laypage 模块。
laypage.render(options)
laypage 组件渲染，核心方法。
渲染
laypage.render(options);
参数 options : 基础属性选项。#详见属性
属性
属性名
描述
类型
默认值
elem
绑定分页容器。值可以是容器 id 或 DOM 对象。如：
elem: 'id' 注意：这里不能加 # 号
elem: document.getElementById('id')
stringDOM
-
count
数据总数。一般通过后端得到
number
-
limit
每页显示的条数。
number
10
limits
每页条数的选择项。 若 layout 参数开启了 limit ，则会出现每页条数的 select 选择框
array
[10,…,50]
curr
初始化当前页码。
number
1
groups
连续出现的页码数量
number
5
prev
自定义“上一页”的内容，支持传入普通文本和 HTML
string
上一页
next
自定义“下一页”的内容，用法同上。
string
下一页
first
自定义“首页”的内容，用法同上。
string
1
last
自定义“尾页”的内容，用法同上。
string
自动获得
layout
自定义分页功能区域排版。可自由排列，可选值有：
count 数据总数区域
prev 上一页区域
page 分页区域
next 下一页区
limit 条目选项区域
refresh 页面刷新区
skip 快捷跳页区
array
查看默认值
limitTemplet 2.8.18+
用于自定义条目模板，如：
limitTemplet: function(item) {
return item + ' / page';
}
function
-
skipText 2.8.18+
用于自定义跳页区域文本，如：
skipText: ['Go to', '', 'Confirm']
array
-
countText 2.9.1+
用于自定义总数区域文本，如：
countText: ['Total ','']
array
-
theme
自定义主题。支持传入：颜色值或任意普通字符。如：
theme: '#c00' 直接设置当前页按钮背景色
theme: 'xxx' 会生成 class="layui-laypage-xxx" 的 CSS 类，以便自定义主题
string
-
hash
设置 hash 名称。设置该属性后，点击分页将会自动对当前 url 追加：#{hash}={curr}，从而在页面刷新时初始化当前页码。#详细用法参考示例
string
-
回调函数
jump
分页跳转后的回调函数。函数返回两个参数：
参数 obj : 当前分页相关的所有选项值
参数 first : 是否首次渲染，一般用于初始加载的判断
laypage.render({
elem: 'id',
count: 70, // 数据总数，从后端得到
jump: function(obj, first){
console.log(obj.curr); // 得到当前页，以便向服务端请求对应页的数据。
console.log(obj.limit); // 得到每页显示的条数
// 首次不执行
if(!first){
// do something
}
}
});
小贴士
laypage 组件只负责分页本身的逻辑，具体的数据请求及对应的视图渲染需要另外去完成。laypage 不仅能应用在一般的异步分页上，还可直接对一段已知数据进行分页展现，如 table 组件的分页就是采用的 laypage。