介绍
minq-paged 是一个基于 jQuery 的分页插件，它支持 Ajax 异步加载数据并自动生成分页导航条，可以轻松实现前端的分页功能。
该插件有以下特点：
- 简单易用，API 简单
- 支持异步加载数据
- 支持自定义分页导航条样式
- 支持快速返回第一页、上一页、下一页、最后一页
- 支持搜索指定页码
- 支持设置一页显示多少条数据
安装使用
安装
npm install minq-paged --save
引入
import 'minq-paged'
首先需要在 HTML 中添加分页导航条的容器：
<div id="pagination"></div>
在 JavaScript 中，我们需要手动初始化分页插件：
$('#pagination').minqpaged({
// 配置项
})配置项
在初始化插件时，可以传入一些配置项以满足不同的需求。
-- -------------------- ---- -------
----------------------------
---------- --- -- ---
------------ -- -- ----
--------- --- -- --------
--------- ------ -- -------
--------- ------ -- -------
---------- ----- -- ------
--------- ----- -- ------
------------ ------ -- ----
---------- ------------------ -- ------
----------------- ------------------------- -- -------
---------- ------------------ -- -------
---------- ------------------ -- -------
----------- ------------------- -- ------
---------- ------------------ -- ------
-------------- ----------- -- ------
------------- ----- -- -------------
-------------- ------ -- -----------
------------ ----------------- -- -
-- -------------- -------
-
--示例
我们现在来演示一个基于 Ajax 异步加载数据的分页效果。
首先我们需要准备一些数据，我们使用 mock 来生成假数据。
-- -------------------- ---- -------
------ ---- ---- --------
------------------ -
----------- --
-------- --
------- ---------
------------ --
---------- ---------
--
--然后我们在页面加载时，通过 Ajax 获取数据。
import $ from 'jquery'
function getList(pageNum) {
return $.get('/list', {
page: pageNum,
pageSize: 10
})
}我们在分页插件的回调函数中触发 Ajax，将数据渲染到页面上。
-- -------------------- ---- -------
----------------------------
---------- ---
------------ --
------------ ----------------- -- -
----------------------------------- -
--- ---- - --
--- ---- - - -- - - ---------------- ---- -
--- ---- - -----------
---- -- ------
---- -- ------ - ------- - -------
---- -- ------ - --------- - -------
---- -- ------ - -------- - -------
---- -- ------ - ------------ - -------
---- -- -------
-
---------------------
--
-
--
----------------------------- -
--- ---- - --
--- ---- - - -- - - ---------------- ---- -
--- ---- - -----------
---- -- ------
---- -- ------ - ------- - -------
---- -- ------ - --------- - -------
---- -- ------ - -------- - -------
---- -- ------ - ------------ - -------
---- -- -------
-
---------------------
--这样，我们就完成了一个简单的分页功能。
完整代码：
-- -------------------- ---- -------
--------- -----
------
------
----- ----------------
----------------- ----------
-------
------
-------
-------
----
-----------
-----------
-----------
-----------
-----
--------
------ ------------------
--------
---- ----------------------
------- ----------------------------------------------------------------------------
------- --------------------------------------------------------------------------------------------
------- --------------------------------------------------------------------------
------- -------------------------------------
--------
------------------ -
----------- --
-------- --
------- ---------
------------ --
---------- ---------
--
--
-------- ---------------- -
------ -------------- -
----- --------
--------- --
--
-
----------------------------
---------- ---
------------ --
------------ ----------------- -- -
----------------------------------- -
--- ---- - --
--- ---- - - -- - - ---------------- ---- -
--- ---- - -----------
---- -- ------
---- -- ------ - ------- - -------
---- -- ------ - --------- - -------
---- -- ------ - -------- - -------
---- -- ------ - ------------ - -------
---- -- -------
-
---------------------
--
-
--
----------------------------- -
--- ---- - --
--- ---- - - -- - - ---------------- ---- -
--- ---- - -----------
---- -- ------
---- -- ------ - ------- - -------
---- -- ------ - --------- - -------
---- -- ------ - -------- - -------
---- -- ------ - ------------ - -------
---- -- -------
-
---------------------
--
---------
-------
-------总结
minq-paged 是一个简单易用的分页插件，它可以帮助开发者轻松实现前端的分页功能。本篇文章我们介绍了插件的使用方法和配置项，并演示了一个基于 Ajax 异步加载数据的分页效果。希望本文对您学习和使用 minq-paged 有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60066f4a1d8e776d0804125f