在前端开发中，分页是一个常用的功能，jquery.page-it 就是一个方便易用的分页插件。
下载并安装
使用 npm 命令进行下载和安装：
npm install jquery.page-it
引入插件：
import 'jquery.page-it';
获取数据
第一步是获取需要进行分页的数据。这可以是任何数据源，如后端接口返回的数据、本地存储的数据等。
以一个例子来说明如何获取数据。假设我们有一个 API，它返回指定页码的数据。
function fetchData(pageNumber) {
return fetch(`/api/data?page=${pageNumber}`)
.then(response => response.json());
}使用 jQuery.page-it
第二步是使用 jquery.page-it 对数据进行分页。
初始化插件
在 HTML 中，创建一个容器：
<div id="pagination"></div>
然后，在 JavaScript 中，传递选项参数并初始化插件：
$('#pagination').pageIt({
pageSize: 10,
dataSource: fetchData
});其中 pageSize 用于指定每页显示多少条数据，dataSource 用于指定数据源的方法。
显示分页结果
最后一步是显示分页结果。
在 HTML 中添加一个用来显示结果的容器：
<ul id="data-list"></ul>
然后在 JavaScript 中，使用 jQuery 的 each 方法来遍历结果集，并将结果添加到容器中：
-- -------------------- ---- -------
--------------------------------- --------------- ----------- ----- -
----- -------- - ----------------
----- ----- - -----------
-----------------
------------- --------------- ----- -
----------------------------------------------
---
---示例代码
完整的示例代码如下：
-- -------------------- ---- -------
---- ---------------------
---- ----------------------
--------
-------- --------------------- -
------ -------------------------------------
-------------- -- -----------------
-
-------------------------
--------- ---
----------- ---------
---
--------------------------------- --------------- ----------- ----- -
----- -------- - ----------------
----- ----- - -----------
-----------------
------------- --------------- ----- -
----------------------------------------------
---
---
---------结论
通过使用 jquery.page-it，我们可以轻松地对数据进行分页和展示。同时，它提供了许多配置选项和事件，可以满足不同场景下的需求。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005668181e8991b448e2a13