jQuery 插件 jPages 是一个用于分页的工具，可以方便地将长列表或内容分成多个页面，并提供用户友好的导航控件。
https://luis-almeida.github.io/jPages/
功能较为全面，支持多种样式和配置选项，适合复杂的分页需求。
以下是 jPages 的基本用法：
步骤 1：引入 jPages 库文件
首先，在 HTML 文件中引入 jPages 的 CSS 和 JavaScript 文件：
<link rel=”stylesheet” href=”path/to/jPages.css”>
<script src=”path/to/jquery.js”></script>
<script src=”path/to/jPages.min.js”></script>
确保 jQuery 库文件在 jPages 之前加载。
步骤 2：准备 HTML 结构
在 HTML 文件中创建一个容器来放置要分页的内容，例如：
<div class=”item-container”>
<!– 这里放置要分页的内容 –>
</div>
<div class=”pagination-container”></div>
步骤 3：初始化 jPages
使用 jQuery 选择器选择你的容器，并调用 jPages 函数进行初始化。
$('.item-container').jPages({
containerID: 'itemContainer', // 你的内容容器的ID
perPage: 5, // 每页显示的项目数量
callback : function(pages, items) {
// pages 对象包含分页的信息
console.log("当前页码: " + pages.current);
console.log("总页数: " + pages.count);
// items 对象包含当前页的项目的信息
items.showing.each(function(index, item) {
console.log("显示的项目: " + $(item).text());
});
items.oncoming.each(function(index, item) {
console.log("即将显示的项目: " + $(item).text());
});
items.hiding.each(function(index, item) {
console.log("隐藏的项目: " + $(item).text());
});
}
});
参数说明
containerID：你的内容容器的 ID，jPages 通过该 ID 来找到要分页的内容。perPage：每页显示的项目数量。startPage：初始页码。startRange：分页导航起始页码范围。midRange：分页导航中间页码范围。endRange：分页导航结束页码范围。callback：在每次分页时执行的回调函数。
callback
允许你在分页行为发生时执行特定的代码。它通常在以下几种情况下被触发：
页面初次加载时：当 jPages 插件首次初始化并渲染分页内容时。
用户点击分页导航按钮时：当用户通过点击分页导航按钮（如下一页、上一页、页码按钮）来改变当前显示的页面时。
通过编程方式改变页面时：当你在 JavaScript 中通过调用 jPages 的方法（如 .jPages(“destroy”)）来改变当前显示的页面时。
参数
pages 分页信息
pages.current: 当前显示的页码。
pages.count: 总页数。
items 项目信息
items.showing： 当前页显示的项目。
items.oncoming：即将显示的项目（如果当前页面正在改变）。
items.hiding： 即将隐藏的项目（如果当前页面正在改变）。