什么是 pagination-pager
pagination-pager 是一款可以快速实现分页功能的 npm 包，它提供了一种简单易用的方式来创建分页器，帮助开发者在前端页面中实现分页功能。使用 pagination-pager，开发者可以方便地配置分页器的样式和分页项的数量，并在页面加载之后自动渲染好分页器。
安装
使用 npm 安装 pagination-pager：
npm install pagination-pager
使用
引入
pagination-pager 可以使用 CommonJS 或 ES6 的模块方式引入：
// CommonJS
const Pager = require('pagination-pager')
// ES6
import Pager from 'pagination-pager'配置
创建一个 Pager 实例并进行配置：
const pager = new Pager({
container: '#pager',
total: 35,
onPageChange: function (pageNum) {
console.log('Current page is', pageNum)
}
})- container：分页器将要被插入的容器 DOM 元素的选择器或 DOM 实例。
- total：总页数。
- onPageChange：在页码更改时触发的回调函数，接受当前页码作为唯一参数。
渲染
调用 Pager 实例的 init() 方法来渲染分页器：
pager.init()
配置项
以下是 Pager 构造函数可用的配置项：
| Option | Type | Default | Desc |
|---|---|---|---|
| container | string/HTMLElement | null | 容器，接受 CSS 选择器或 DOM 元素 |
| total | number | 0 | 总页数 |
| current | number | 1 | 当前页码 |
| visiblePages | number | 10 | 可见分页项数量，必须为奇数 |
| firstLastBtn | boolean | true | 是否显示首页链接和尾页链接 |
| prevNextBtn | boolean | true | 是否显示上一页链接和下一页链接 |
| prevBtnText | string | 'Prev' | 上一页链接的文本内容 |
| nextBtnText | string | 'Next' | 下一页链接的文本内容 |
| pageBtnText | string | '%d' | 分页按钮的文本内容，%d 将会被替换为页码 |
| ellipsisBtnText | string | '...' | 省略号的文本内容 |
| linkTextAttrs | object | {} | 分页链接元素的附加属性 |
| linkClassname | string | 'pagination-link' | 分页链接元素的 class |
| activeClassname | string | 'active' | 当前页链接元素的 class |
| disabledClassname | string | 'disabled' | 禁用链接元素的 class |
| ellipsisClassname | string | 'pagination-ellipsis' | 省略号元素的 class |
| showPrevNextWhenEmpty | boolean | false | 当总页数为 1 时是否显示上一页链接和下一页链接 |
| showFirstLastWhenEmpty | boolean | false | 当总页数为 1 时是否显示首页链接和尾页链接 |
示例代码
以下是一个完整的使用示例：
-- -------------------- ---- -------
---- -----------------
------- -----------------------
----- ----- - --- -------
---------- ---------
------ ---
------------- -------- --------- -
-------------------- ---- -- ------------
-
--
------------
---------结语
pagination-pager 是一个非常简单易用的 npm 包，可用于在前端网页中实现分页功能。它具有丰富的配置项，可以轻松地实现各种不同样式的分页器。在实际应用中，使用 pagination-pager 可以大大提高开发效率，减少代码量。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/pagination-pager