在前端开发中，列表分页是一个非常常见的需求。而使用现成的插件可以有效地提高开发效率和降低出错概率。npm包 list.pagination.js 就是一个实现了列表分页功能的开源插件。本文将介绍如何使用该插件。
安装
首先，在项目目录下打开终端（Terminal 或 CMD），运行以下命令进行安装：
npm install list.pagination.js --save
引入
然后，在需要使用分页功能的页面上引入 list.pagination.js 文件：
<script src="./node_modules/list.pagination.js/dist/list.pagination.min.js"></script>
或者使用模块化的方式进行引入：
import Pagination from 'list.pagination.js';
使用
HTML 结构
在包含列表的 HTML 结构中，添加一个 id 为 pagination-container 的元素用于显示分页器：
<div id="pagination-container"></div>
初始化
在 JavaScript 中，使用如下代码初始化分页器：
-- -------------------- ---- -------
----- ---------- - --- ------------
---------- ------------------------
------ ----
-------- ---
------------ --
--------- -------------- -
-- ----------------
----------------------------
-- ----- ------
-
---其中，参数说明如下：
container: 分页器容器的选择器，可以是选择器字符串或者 DOM 元素。total: 列表总数。perPage: 每页显示的条目数量。currentPage: 当前页码。callback: 分页器切换页码时调用的回调函数。
更新
当列表数据更新时，可以通过以下代码更新分页器：
pagination.update({
total: 200,
currentPage: 2
});其中，参数说明同初始化参数。
示例代码
下面是一个完整的示例代码，演示了如何使用 list.pagination.js 实现列表分页功能。
-- -------------------- ---- -------
--------- -----
------
------
----- ----------------
---------------------
------- -----------------------------------------------------------------------------
-------
------
--- -------------------------
---- --------------------------------
--------
----- ------------- - ------------------------------------------
----- ------------------- - ------------------------------------------------
-- ------
----- -------- - ------------ ------- --- ------------- ------ -- -
------ -
--- ----- - --
----- ----- ------- - ---
--
---
-- ----
-------- ---------------- -
----- ------- - ---
----- ----- - ----- - -- - --------
----- --- - ----- - --------
----- -------- - --------------------- -----
--- ---- - ---
--------------------- -- -
---- -- ------------------------
---
----------------------- - -----
-
-- ------
----- ---------- - --- ------------
---------- --------------------
------ ----------------
-------- ---
------------ --
--------- -------------- -
----------------------------
-----------------
-
---
-- ----------
--------------
---------
-------
-------总结
list.pagination.js 是一个轻量级、易用的列表分页插件，能够快速地为前端开发提供便利。希望本文对您有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/39086