在前端页面中，分页器是一种经常使用的功能。虽然可以自己写分页器，但是这个功能却非常通用，不同的项目中可能会使用不同的分页器，如果每个项目都重写一遍，那么工作量将会非常大。而使用 npm 包提供的分页器，则可以大大减少工作量和提高效率。本文将介绍一个轻量级的 npm 包 -- tiny-pagination 的使用教程。
安装
首先，我们需要在项目中安装 tiny-pagination 包。可以使用以下命令进行安装：
--- ------- --------------- ----------
安装完成后，我们就可以在我们的项目中使用它了。
使用
使用 tiny-pagination 非常简单。我们只需要先引入它，然后在需要分页器的地方使用即可。
引入
有两种方式可以引入 tiny-pagination，一种是使用 CommonJS 的方式：
----- -------------- - ---------------------------
另一种是使用 ES6 的方式：
------ -------------- ---- ------------------
使用
使用 TinyPagination 进行分页操作的步骤如下：
初始化
----- ------- - -
-------- --------------
------ ----
------ ---
------------ --
-------- ------- ------------ -- -
-------------------- ---- ------ ---- -------------
-
--
--- ---------- - --- ------------------------wrapper 参数是分页器的容器，是一个 CSS 选择器，可以是一个选择器字符串，也可以是一个 DOM 元素。
total 参数代表数据总量，limit 参数代表每页数据量，默认为 10。
currentPage 参数代表当前页码，默认为 1。
onClick 回调函数会在点击分页按钮时被调用，会得到两个参数：currentPage 当前页码和 event 点击事件。
设置总数据量
如果分页器所分页的数据总量变化了，我们可以通过设置 total 参数来更新分页器的总页数和分页按钮。
-------------------------
setTotal 方法会重新计算分页器的总页数和分页按钮，并更新到页面上。
设置当前页码
如果需要在分页器的生命周期内更新当前页码，我们可以通过设置 currentPage 参数来更新分页器的当前页码和分页按钮。
-----------------------------
销毁
如果需要销毁分页器，我们可以通过销毁实例来完成：
---------------------
销毁实例会同时清空分页元素的内容和事件监听。
示例代码
下面是一个简单的使用示例：
--------- -----
------
------
----- ----------------
---------- -------------- ------------
----- ---------------- -------------------------------------------------------------------
-------
------
---- ----------------------
---- ----------------
------- --------------------------------------------------------------------------
--------
----- ------- - -
-------- --------------
------ ----
------ ---
------------ --
-------- ------- ------------ -- -
-------------------- ---- ------ ---- -------------
-
--
--- ---------- - --- ------------------------
-------- ---------------- -
--- ---- - ---
--- ---- - - ----- - -- - --- - - ---- - --- ---- -
---- -- --------------
-
----------------------------------------- - -----
-
--------------
-------------------------
---------------------------- ------------- -- -
------------------------
---
---------
-------
-------这个示例展示了一个使用 tiny-pagination 分页控件的例子。简单来说，我们只需要在 HTML 中创建一个 div 容器，调用 TinyPagination 构造函数并传入配置选项。然后我们可以监听其 pageChanged 事件，并在回调函数中写入处理分页后的渲染操作。最后就可以轻松地进行分页操作，而不需要手写任何的分页逻辑。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/6005518581e8991b448ced75