什么是 mesour-pager?
mesour-pager 是一个基于 jQuery 的通用的分页组件。它可以帮助我们快速地实现一个分页功能并提供许多配置选项，让我们可以自定义我们的分页组件。
安装
如果你已经在你的项目中使用了 npm，你可以通过以下命令安装 mesour-pager ：
npm install mesour-pager --save
使用
引入 mesour-pager.css 和 mesour-pager.js 文件：
<link rel="stylesheet" href="node_modules/mesour-pager/mesour-pager.css"> <script src="node_modules/mesour-pager/mesour-pager.js"></script>
在你的 HTML 文件中添加一个 div 用于渲染分页组件：
<div id="pager"></div>
初始化 mesour-pager ：
-- -------------------- ---- -------
-----------------------------
--------------------------
------ ---
---------------- --
------------ --
------------- -------------- -
------------------
-
---
---配置
mesour-pager 提供了以下配置选项：
pages: 分页页数，默认值为 10maxVisiblePages: 分页组件中最多显示的页数，默认值为 5currentPage: 当前页数，默认值为 1onChangePage: 当页数发生变化时调用的函数，默认为 null
onChangePage 函数接收一个参数 page，用于获取当前页数。
示例代码
-- -------------------- ---- -------
--------- -----
----- ----------
------
----- ----------------
------------------- ----------
----- ---------------- --------------------------------------------------
-------
------
---------------- -------
---- -----------------
------- ------------------------------------------------------
------- ---------------------------------------------------------
--------
-----------------------------
--------------------------
------ ---
---------------- --
------------ --
------------- -------------- -
------------------
-
---
---
---------
-------
-------运行以上代码，你会得到如下的分页组件：
总结
mesour-pager 是一个简单易用的分页组件，它提供了非常多的配置选项，可以帮助我们实现任何样式的分页组件，并且非常容易集成到我们的项目中。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005516481e8991b448ce930