4.2 分页laypage
laypage 的使用非常简单,指向一个用于存放分页的容器,通过服务端得到一些初始值,即可完成分页渲染:
快速使用
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>layPage快速使用</title>
<link rel="stylesheet" href="/static/build/layui.css" media="all">
</head>
<body>
<div id="test1"></div>
<script src="/static/build/layui.js"></script>
<script>
layui.use('laypage', function(){
var laypage = layui.laypage;
//执行一个laypage实例
laypage.render({
elem: 'test1' //注意,这里的 test1 是 ID,不用加 # 号
,count: 50 //数据总数,从服务端得到
});
});
</script>
</body>
</html>
4.2.1 基础参数
参数选项 |
说明 |
类型 |
默认值 |
elem |
指向存放分页的容器,值可以是容器ID、DOM对象。如: 1. elem: 'id' 注意:这里不能加 # 号 2. elem: document.getElementById('id') |
String/Object |
- |
count |
数据总数。一般通过服务端得到 |
Number |
- |
limit |
每页显示的条数。laypage将会借助 count 和 limit 计算出分页数。 |
Number |
10 |
limits |
每页条数的选择项。如果 layout 参数开启了 limit,则会出现每页条数的select选择框 |
Array |
[10, 20, 30, 40, 50] |
curr |
起始页。一般用于刷新类型的跳页以及HASH跳页。 |
Number |
1 |
groups |
连续出现的页码个数 |
Number |
5 |
prev |
自定义“上一页”的内容,支持传入普通文本和HTML |
String |
上一页 |
next |
自定义“下一页”的内容,同上 |
String |
下一页 |
first |
自定义“首页”的内容,同上 |
String |
1 |
last |
自定义“尾页”的内容,同上 |
String |
总页数值 |
layout |
自定义排版。可选值有:count(总条目输区域)、prev(上一页区域)、page(分页区域)、next(下一页区域)、limit(条目选项区域)、refresh(页面刷新区域。注意:layui 2.3.0 新增) 、skip(快捷跳页区域) |
Array |
['prev', 'page', 'next'] |
theme |
自定义主题。支持传入:颜色值,或任意普通字符。如: 1. theme: '#c00' 2. theme: 'xxx' //将会生成 class="layui-laypage-xxx" 的CSS类,以便自定义主题 |
String |
- |
hash |
开启location.hash,并自定义 hash 值。如果开启,在触发分页时,会自动对url追加:#!hash值={curr} 利用这个,可以在页面载入时就定位到指定页 |
String/Boolean |
false |