分页组件
分页组件 laypage
提供了前端的分页逻辑,使得我们可以很灵活处理不同量级的数据,从而提升渲染效率。
提示
laypage 组件只负责分页本身的逻辑,具体的数据请求及对应的视图渲染需要另外去完成。laypage 不仅能应用在一般的异步分页上,还可直接对一段已知数据进行分页展现,如 table 组件的分页就是采用的 laypage。
基本使用
html
<body>
<div id="demo-laypage-normal"></div>
<script src="/static/layui.js"></script>
<script>
layui.use(function () {
var laypage = layui.laypage;
laypage.render({
elem: "demo-laypage-normal", // 挂载对象
count: 100, // 数据总数
});
});
</script>
</body>
渲染
API | 描述 |
---|---|
var laypage = layui.laypage | 获得 laypage 模块。 |
laypage.render(options) | laypage 组件渲染,核心方法。 |
laypage.render(options);
- 参数
options
: 基础属性配置项。
属性
属性名 | 描述 | 类型 | 默认值 |
---|---|---|---|
elem | 绑定分页容器。值可以是容器 id 或 DOM 对象。如:elem: 'id' 注意:这里不能加 # 号elem: document.getElementById('id') | string DOM | - |
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 | layout: ['prev','page','next'] |
theme | 自定义主题。支持传入:颜色值或任意普通字符。如:theme: '#c00' 直接设置当前页按钮背景色theme: 'xxx' 会生成 class="layui-laypage-xxx" 的 CSS 类,以便自定义主题 | string | - |
hash | 设置 hash 名称。设置该属性后,点击分页将会自动对当前 url 追加:#{hash}={curr} ,从而在页面刷新时初始化当前页码。 | string | - |
回调函数
分页跳转后的回调函数。函数返回两个参数:
- 参数
obj
: 当前分页相关的所有选项值 - 参数
first
: 是否首次渲染,一般用于初始加载的判断
html
<body>
<div id="demo-laypage-normal"></div>
<script src="/static/layui.js"></script>
<script>
layui.use(function () {
var laypage = layui.laypage;
laypage.render({
elem: "demo-laypage-normal", // 挂载对象
count: 100, // 数据总数
layout: ["count", "prev", "page", "next", "limit", "refresh", "skip"], // 功能布局
jump: function (obj, first) {
console.log(obj.curr); // 得到当前页,以便向服务端请求对应页的数据。
console.log(obj.limit); // 得到每页显示的条数
// 首次不执行
if (!first) {
// do something
console.log("不是第一次才会执行");
}
},
});
});
</script>
</body>