目录
一：基本用法
分页组件 laypage 提供了前端的分页逻辑，使得我们可以很灵活处理不同量级的数据，从而提升渲染效率
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>分页</title>
<link rel="stylesheet" href="//res.layui.com/layui/dist/css/layui.css" media="all">
</head>
<body>
<div id="test"></div>
<script src="//res.layui.com/layui/dist/layui.js"></script>
<script>
layui.use('laypage', function(){
var laypage = layui.laypage;
//执行一个laypage实例
laypage.render({
elem: 'test' //注意，这里的 test 是上面的 ID，不用加 # 号
,count: 100 //数据总数，从服务端得到
,limit: 10 //默认显示10条
});
});
</script>
</body>
</html>
API
| API | 描述 |
|---|---|
| var laypage = layui.laypage | 获得 laypage 模块。 |
| laypage.render(options) | laypage 组件渲染，核心方法。 |
渲染
laypage.render(options);
- 参数
options: 基础属性配置项。#详见属性
属性
| 属性名 | 描述 | 类型 | 默认值 |
|---|---|---|---|
| elem | 绑定分页容器。值可以是容器
| string DOM | - |
| count | 数据总数。一般通过后端得到 | number | - |
| limit | 每页显示的条数。 | number |
|
| limits | 每页条数的选择项。 若 | array |
|
| curr | 初始化当前页码。 | number |
|
| groups | 连续出现的页码数量 | number |
|
| prev | 自定义“上一页”的内容，支持传入普通文本和 HTML | string |
|
| next | 自定义“下一页”的内容，用法同上。 | string |
|
| first | 自定义“首页”的内容，用法同上。 | string |
|
| last | 自定义“尾页”的内容，用法同上。 | string | 自动获得 |
| layout | 自定义分页功能区域排版。可自由排列，可选值有：
| array | 查看默认值 |
| theme | 自定义主题。支持传入：颜色值或任意普通字符。如：
| string | - |
| hash | 设置 | string | - |
| 分页跳转后的回调函数。函数返回两个参数：
| |||
<div id="demo-laypage-normal-1"></div>
<div id="demo-laypage-normal-2"></div>
<script>
layui.use(function(){
var laypage = layui.laypage;
// 普通用法
laypage.render({
elem: 'demo-laypage-normal-1',
count: 50 // 数据总数
});
laypage.render({
elem: 'demo-laypage-normal-2',
count: 100 // 数据总数
});
});
</script> 
二：自定义主题
<div id="demo-laypage-theme-1"></div>
<div id="demo-laypage-theme-2"></div>
<div id="demo-laypage-theme-3"></div>
<script>
layui.use(function(){
var laypage = layui.laypage;
// 自定义主题
laypage.render({
elem: 'demo-laypage-theme-1',
count: 100,
theme: '#1E9FFF'
});
laypage.render({
elem: 'demo-laypage-theme-2',
count: 100,
theme: '#FF5722'
});
laypage.render({
elem: 'demo-laypage-theme-3',
count: 100,
theme: '#FFB800'
});
});
</script>
三：自定义文本
<div id="demo-laypage-text"></div>
<script>
layui.use(function(){
var laypage = layui.laypage;
// 自定义文本
laypage.render({
elem: 'demo-laypage-text',
count: 100,
first: '首页',
last: '尾页',
prev: '<em>←</em>',
next: '<em>→</em>'
});
});
</script>
四：自定义排版
<div id="demo-laypage-layout-1"></div>
<div id="demo-laypage-layout-2"></div>
<div id="demo-laypage-layout-3"></div>
<script>
layui.use(function(){
var laypage = layui.laypage;
// 自定义排版
laypage.render({
elem: 'demo-laypage-layout-1',
count: 1000,
layout: ['limit', 'prev', 'page', 'next']
});
laypage.render({
elem: 'demo-laypage-layout-2',
count: 1000,
layout: ['prev', 'next', 'page']
});
laypage.render({
elem: 'demo-laypage-layout-3',
count: 1000,
layout: ['page', 'count']
});
});
</script>
五：完整显示
<div id="demo-laypage-all"></div>
<script>
layui.use(function(){
var laypage = layui.laypage;
// 完整显示
laypage.render({
elem: 'demo-laypage-all', // 元素 id
count: 100, // 数据总数
layout: ['count', 'prev', 'page', 'next', 'limit', 'refresh', 'skip'], // 功能布局
jump: function(obj){
console.log(obj);
}
});
});
</script> 
