介绍
paginated 是一个前端常用的分页组件，它提供了一些易用且独立的分页算法。通过 paginated，你可以方便地实现各种分页效果，包括但不限于：基于数组、基于数据库查询结果、基于网络 API 请求结果、基于滚动等等。
安装
你可以在 npm 中安装 paginated。
npm install paginated --save
基础用法
初始化
import Paginated from 'paginated';
const pagination = new Paginated({
total: 100,
pageSize: 10,
pageRange: 3,
currentPage: 1,
});上面的代码展示了如何初始化，total 是总条目数，pageSize 是每页显示的条目数，pageRange 是当前页的前后各有几个页码，currentPage 是当前页数。
生成分页器
-- -------------------- ---- ------- ----- ------------ - ------------------------------ ---------------------- - ------------- -- -------- ----- ---------- - --------------------------------- -------------------- - ------------------ -------------------- - ------- ------------------------------------- -- ------ --- ------ ---- -- ------------------- - ----- ------ - --------------------------------- ---------------- - ----------------- - ------------- - - ------------------------ - ---- ---------------- - ------------ --------------------------------- - -- -------- ----- ---------- - --------------------------------- -------------------- - ------------------ -------------------- - ------- -------------------------------------
上面的代码展示了如何生成分页器，pagination.pages() 方法可以获取所有页面的信息（包括当前页码、是否为当前页等），根据这些信息生成相应的 DOM 元素。
更新分页器
-- -------------------- ---- -------
-------- ------------------ -
----- ----------- - -----------------------
--- ------ ------- - ------- ---- ------- -- -- ----------------------------- -
----- ------ - --------------------------- - ---
-- --------- -
------------------------------------------------
- ---- -
---------------------------------------------------
--------------------------- -----
-
-
----- ---------- - ------------------------
----- ---------- - -----------------------
--------------------------------------- -----------------------
--------------------------------------- -----------------------
-
----------------------- ------------------
--------------------- ------------------上面的代码展示了如何更新分页器，pagination.on('change', callback) 方法可以订阅分页器的变化事件，在翻页动作时执行相应的回调函数。
高级用法
自定义项样式
const pagination = new Paginated({
total: 100,
pageSize: 10,
pageRange: 3,
currentPage: 1,
itemClass: 'pagination-page',
itemCurrentClass: 'pagination-page-current',
});上面的代码展示了如何自定义项的样式，itemClass 是普通项的样式，itemCurrentClass 是当前项的样式。
自定义项内容
const pagination = new Paginated({
total: 100,
pageSize: 10,
pageRange: 3,
currentPage: 1,
itemRender: ({ number, current }) =>
`<a href="${ number }" class="pagination-page${ current ? ' pagination-page-current' : '' }">${ number }</a>`,
});上面的代码展示了如何自定义项的内容，itemRender 是一个函数，可以接收当前项的信息并返回相应的 HTML 字符串。
自定义事件
-- -------------------- ---- ------- ----- ---------- - --- ----------- ------ ---- --------- --- ---------- -- ------------ -- --- --------------------- -- -- ----------------------- --------------- ----------------------- -- -- ----------------- ------- -- -- ---------------------- -----
上面的代码展示了如何自定义分页器的事件，pagination.on(event, callback) 方法可以订阅分页器的事件，支持的事件包括 init、reset、change。
总结
paginated 可以大大方便前端开发者实现各种分页效果，它提供丰富的配置项和事件，使得开发者可以自由地定制分页器的外观和行为。我们希望本文介绍的内容对你有帮助，并期待你在实际开发中能够灵活运用 paginated 提供的功能。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055cb681e8991b448da347