最近在写一个基于只基于jquery的项目,在此期间因为需要使用分页,但在网上看到大部分都是看起来不美观,操作起来不方便,写起来又代码冗余。后来我就找到了一款我目前看到比较好用,界面简洁,功能强大的分页插件。
Pagination.js官网
上代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<link rel="stylesheet" href="https://pagination.js.org/css/base.css" />
<link rel="stylesheet" href="https://pagination.js.org/css/prettify.css" />
<link
rel="stylesheet"
href="https://pagination.js.org/dist/2.1.5/pagination.css"
/>
<link rel="stylesheet" href="https://pagination.js.org/css/style.css" />
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.1/jquery.js"></script>
<script src="/pagination.js"></script>
</head>
<body>
<div id="data-container"></div>
<div id="pagination-container"></div>
<script>
$("#pagination-container").pagination({
/*
1.数据源,最终提供给分页组件的是一个数组
2.数据源支持 4 种格式
3.此次选择URL方式
dataSource:URL
4.URL : 接口地址 每次分页发起请求时,默认会附加两个参数 pageNumber 和 pageSize
*/
dataSource: "http://localhost:8080/article/articleList",
/*
指定 dataSource 返回数据数组
例如我的接口返回数据
code: 200
data: {
rows: [,…],
total: 6
}
msg: "操作成功"
*/
locator: "data.rows",
/*
自定义请求参数
*/
alias: {
pageNumber: "pageNum",
pageSize: "pageSize",
},
/*
远程获取 totalNumber ,用于异步分页
*/
totalNumberLocator: function (res) {
return res.data.total;
},
pageSize: 5,
/*
是否显示跳转输入框
*/
showGoInput: true,
/*
是否显示跳转按钮
*/
showGoButton: true,
/*
是否在当前显示为第一页时隐藏 '上一页' 按钮
*/
autoHidePrevious: true,
/*
是否在当前显示为最后一页时隐藏 '下一页' 按钮
*/
autoHideNext: true,
/*
是否在总页数小于1页时隐藏分页
*/
hideWhenLessThanOnePage: true,
/*
!!!更多选项请参考官方文档: https://pagination.js.org/docs/index-cn.html#Events
*/
/*
每次翻页时的回调
*/
callback: function (data, pagination) {
$("#data-container").empty();
$.each(data, function (index, item) {
/*
自己方式渲染页面
*/
$("#data-container").append(`<p>${item.summary}</p>`);
});
},
});
</script>
</body>
</html>