简介
twbs-pagination 是一个基于 Bootstrap 样式的分页插件，提供了一种简单而灵活的方法来生成分页控件。它可以用于任何需要分页的项目中，适用于前端开发者。
安装
使用 npm 进行安装：
npm install twbs-pagination --save
使用
在页面中引入 twbs-pagination 的 CSS 和 JS 文件，并创建一个 HTML 元素作为分页控件的容器，例如：
<div id="pagination"></div>
然后，在 JavaScript 中初始化 twbs-pagination：
-- -------------------- ---- -------
--- ------- - -
----------- ---
------------- --
------------ -------- ------- ----- -
------------------
-
--
-----------------------------------------上述代码中，totalPages 表示总页数，visiblePages 表示可见页数，当用户点击某一页时，会触发 onPageClick 回调函数并将点击的页数传入。
参数
以下是 twbs-pagination 支持的参数及其说明：
| 参数 | 类型 | 默认值 | 说明 |
|---|---|---|---|
| totalPages | Number | 1 | 总页数 |
| startPage | Number | 1 | 起始页码 |
| visiblePages | Number | 5 | 可见页码数量 |
| initiateStartPageClick | Boolean | true | 是否在初始化时触发 onPageClick 回调函数 |
| href | Boolean | false | 是否使用链接作为分页控件 |
| hrefVariable | String | "{{page}}" | 链接中要替换的页面变量名 |
| first | String/Boolean | "First" | “首页”按钮的文本或是否显示 |
| prev | String/Boolean | "Previous" | “上一页”按钮的文本或是否显示 |
| next | String/Boolean | "Next" | “下一页”按钮的文本或是否显示 |
| last | String/Boolean | "Last" | “末页”按钮的文本或是否显示 |
| loop | Boolean | false | 是否循环显示 |
| paginationClass | String | "pagination" | 分页控件的 CSS 类名 |
| nextClass | String | "page-item next" | “下一页”按钮的 CSS 类名 |
| prevClass | String | "page-item prev" | “上一页”按钮的 CSS 类名 |
| lastClass | String | "page-item last" | “末页”按钮的 CSS 类名 |
| firstClass | String | "page-item first" | “首页”按钮的 CSS 类名 |
| pageClass | String | "page-item" | 普通页码的 CSS 类名 |
| activeClass | String | "active" | 当前页码的 CSS 类名 |
| disabledClass | String | "disabled" | 不可点击页码的 CSS 类名 |
| anchorClass | String | "page-link" | 链接的 CSS 类名 |
| onPageClick | Function | null | 用户点击某一页时的回调函数 |
实例
以下是一个完整的 twbs-pagination 示例：
-- -------------------- ---- -------
--------- -----
------
------
---------------------- ------------
----- ---------------- ---------------------------------------------------------------------------------------
----- ---------------- ---------------------------------------------------------------------------------------------
-------
------
---- ----------------------
------- ----------------------------------------------------------------------------
------- ----------------------------------------------------------------------------------------------------
--------
--- ------- - -
----------- ---
------------- --
------------ -------- ------- ----- -
------------------
-
--
-----------------------------------------
---------
-------
-------总结
twbs-pagination 是一个简单易用的
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/35827