在前端开发中，经常遇到需要进行分页处理的情况。而使用 npm 包 node-paginate-anything 可以方便快捷地实现分页功能。本文将介绍如何使用该 npm 包实现分页，并附上示例代码。
安装和导入 node-paginate-anything
使用 npm 安装 node-paginate-anything：
npm install node-paginate-anything
在前端项目中导入该模块：
import Pagination from 'node-paginate-anything';
创建分页
在分页组件中创建分页：
const p = new Pagination(totalItems, currentPage, pageSize, maxPages);
各参数含义如下：
- totalItems：总条目数
- currentPage：当前页码
- pageSize：每页条目数
- maxPages：最大页数（可选）
例如：
const p = new Pagination(100, 1, 10, 5);
表示总共有 100 条数据，每一页显示 10 条数据，当前页码为 1，最多显示 5 个页码。
获取分页数据
获取当前页应该显示的数据，可以使用 slice() 方法来获取。例如：
const pageData = data.slice(p.startIndex, p.endIndex + 1);
其中，startIndex 和 endIndex 分别表示当前页码所显示的数据的起始索引和结束索引。因为 slice() 方法在获取数据时不包含结束索引本身，所以此处加 1。
渲染分页器
在 Vue.js 中，可以使用 v-for 指令来渲染分页器：
-- -------------------- ---- -------
--- -------------------
--- ----------------------------
-- ------- ---------------------------------------------- - ----
-------
----
-----
--- ----------- -- --------------------------
-- -------
---------------- ---- --- ------------------------
-------------------------------
-- ---- --
----
-----
--- ----------------------------
-- ------- ---------------------------------------------- - ----
-------
----
-----
-----其中，pagination 是使用 node-paginate-anything 创建的分页对象。
示例代码
完整的示例代码如下：
-- -------------------- ---- -------
----------
-----
-------
-------
----
-----------
-------------
-----
--------
-------
--- ----------- -- --------- ---------------
------ ------- -------
------ --------- -------
-----
--------
--------
--- -------------------
--- ----------------------------
-- ------- ---------------------------------------------- - ----
-------
----
-----
--- ----------- -- --------------------------
-- -------
---------------- ---- --- ------------------------
-------------------------------
-- ---- --
----
-----
--- ----------------------------
-- ------- ---------------------------------------------- - ----
-------
----
-----
-----
------
-----------
--------
------ ---------- ---- -------------------------
------ ------- -
------ -
------ -
----- -
- --- -- ----- --- --
- --- -- ----- --- --
- --- -- ----- --- --
- --- -- ----- --- --
- --- -- ----- --- --
- --- -- ----- --- --
- --- -- ----- --- --
- --- -- ----- --- --
- --- -- ----- --- --
- --- --- ----- --- --
- --- --- ----- --- --
- --- --- ----- --- --
- --- --- ----- --- --
- --- --- ----- --- --
- --- --- ----- --- --
- --- --- ----- --- --
- --- --- ----- --- --
- --- --- ----- --- --
- --- --- ----- --- --
- --- --- ----- --- --
- --- --- ----- --- --
- --- --- ----- --- --
- --- --- ----- --- --
- --- --- ----- --- --
- --- --- ----- --- --
- --- --- ----- --- --
--
----------- -----
--
--
--------- -
---------- -
-- ------------------ ------ ----------
------ ------------------------------------------- ------------------------ - ---
--
--
--------- -
----------------
--
-------- -
------------- -
--------------- - --- ---------------------------- ----- -- ---
--
--
--
---------这段代码中会生成一个表格和一个分页器，初始的表格数据是 data 数组中的所有数据，当分页器的页码被点击时，会改变当前页码并重新渲染表格。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/5f2a43de3b0ab45f74a8bae6