Layui快速入门之第十四节 分页

目录

一：基本用法

API

渲染

属性

二：自定义主题 

三：自定义文本 

四：自定义排版

五：完整显示 

---

一：基本用法

          分页组件 laypage 提供了前端的分页逻辑，使得我们可以很灵活处理不同量级的数据，从而提升渲染效率

API

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	查看默认值
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 } } });

 

二：自定义主题 

三：自定义文本 

四：自定义排版

五：完整显示