分页组件 laypage

2024-07-01 04:59| 来源: 网络整理| 查看: 265

分页组件

分页组件 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

limits

每页条数的选择项。若 layout 参数开启了 limit ，则会出现每页条数的 select 选择框

array

[10,…,50]

curr

初始化当前页码。

number

groups

连续出现的页码数量

number

自定义“上一页”的内容，支持传入普通文本和 HTML

string

自定义“下一页”的内容，用法同上。

string

first

自定义“首页”的内容，用法同上。

string

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。

【本文地址】

公司简介

联系我们