如果你需要在前端实现分页功能，那么 paginationjs 可能是一个不错的选择。它是一个基于 jQuery 的 npm 包，可以用来处理数据分页、排序和过滤。
安装和使用
使用 npm 安装：
npm install paginationjs或使用 CDN 链接引入：
<script src="https://cdn.jsdelivr.net/npm/paginationjs@2.1.5/dist/pagination.min.js"></script>
接着，在页面中引入 jQuery 和 pagination.min.js 文件：
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> <script src="path/to/pagination.min.js"></script>
然后，你可以通过以下代码初始化 paginationjs：
$('#pagination-container').pagination({ dataSource: [1, 2, 3, 4, 5, 6, 7], pageSize: 2, callback: function(data, pagination) { // 处理分页数据 } });
这里通过传递一个数组作为数据源，并设置每页显示 2 条数据，来创建一个简单的分页器。页面上需要有一个容器元素，它会包含生成的分页组件。
参数配置
paginationjs 支持多种参数配置，以满足不同的需求。下面是一些常用的参数及其含义：
dataSource: 数据源，必须是一个数组。pageSize: 每页显示的条数，默认值为10。pageNumber: 初始页码，默认值为1。pageRange: 显示的页码范围，默认值为2。totalNumber: 数据总条数。如果不传递该参数，则会根据数据源的长度自动计算。ajax: 是否使用 AJAX 加载数据，如果设置为true，则需要提供一个ajax配置项。ajax.url: AJAX 请求的 URL。ajax.data: 发送到服务器的数据。ajax.success: AJAX 请求成功后的回调函数。callback: 分页回调函数，用于处理分页后的数据。
实例演示
下面是一个完整的实例，它通过 AJAX 加载数据，并使用 Bootstrap 样式来渲染分页器：
-- -------------------- ---- ------- --------- ----- ------ ------ ----- ---------------- -------------------- --------------- ----- ---------------- ----------------------------------------------------------------------------- ------ ---------------- --------------------- - ----------- ----- - ------------------- -- - -------- ------------- --------------- ---------------- -------------- ---- - ------------------- -- - -------- ------- ------ ----- ------- -- ---------- ----- - ------------------------------- - - -------------- - ----------------------- ---------------------------- --------------------------- - -------- ----- - -------- ------- ------ ---- ------------------ ----------------- ------------ ------ ------------ ---------------- ------- ---- ----------- ------------- ----- -------- ------ ---------------------------- -------- ---- -------------------------------- ------ ------- ----------------------------------------------------------- ------- ----------------------------------------------------------------------------------- ------- -------------------------------------------------------------------------------------- -------- --------------------------------------- ----------- -------------- - -------- ---- -------------------- --------- ------- -------- ------------------ - --------------- - --- -- --------- - ----------------------------------------------------------- -------- ----------------------------------------------------------------------------------展开代码
