jquery 动态分页
时间：2022-10-07 17:30:00
1.动态分页js
/** * @version: v1.8 * @author: xgc-whj * @date: 2019-05-29 00:00:00 * @license: MIT license release * @jq22 address: http://www.jq22.com/jquery-info17548 * @GitHub: https://github.com/w0624/jquery-pagination * @description: jQuery分页插件，可定制样式，默认有五套样式，可定制插件选项，简单方便，兼容IE8 */ (function() { $.fn.extend({ whjPaging: function(b, r) { var g = $(this); if (b === "getPage") { return { totalSize: g.get(0).pageText.totalSize, currPage: g.get(0).pageText.staticCurrPage, pageSize: g.get(0).pageText.staticPageSize, totalPage: g.get(0).pageText.staticTotalPage } } else { if (b === "setPage") { g.get(0).pageText.currPage = r.currPage != null ?= null ? r.currPage : null; g.get(0).pageText.totalPage = r.totalPage != null ? r.totalPage : null; g.get(0).pageText.totalSize = r.totalSize != null ? r.totalSize : null; if (g.get(0).pageText.isShowPageSizeOpt) { c() } } else { if (b != null) { var o = [{ value: 8, text: "8条/页", selected: true }, { value: 16, text: "16条/页" },{ value: 32, text: "32条/页" }]; if (b.pageSizeOpt != null) { o = b.pageSizeOpt } var s = o[0].value; var x = o.length; for (var m = 0; m < x; m ) { if (o[m].selected) { s = o[m].value; break } if (m 1 == x) { o[0].selected = true } } var d = "whj_jqueryPaginationCss-1"; if (b.css != null) { switch (b.css) { case "css-1": d = "whj_jqueryPaginationCss-1"; break; case "css-2": d = "whj_jqueryPaginationCss-2"; break; case "css-3": d = "whj_jqueryPaginationCss-3"; break; case "css-4": d = "whj_jqueryPaginationCss-4"; break; case "css-5": d = "whj_jqueryPaginationCss-5"; break; default: d = b.css; break } } g.get(0).pageText = { css: d, pageSizeOpt: o, totalPage: b.totalPage != null ?= null ? b.totalPage : null, showPageNum: b.showPageNum != null ? b.showPageNum : 5, firstPage: b.firstPage != null ? b.firstPage : "首页", previousPage: b.previousPage != null ? b.previousPage : "上一页", nextPage: b.nextPage != null ? b.nextPage : "下一页", lastPage: b.lastPage != null ? b.lastPage : "尾页", skip: b.skip != null ? b.skip : "跳至", // confirm: b.confirm != null ? b.confirm : "确认", // refresh: b.refresh != null ? b.refresh : "刷新", totalPageText: b.totalPageText != null ? b.totalPageText : "共{}页", isShowFL: b.isShowFL === false ? false : true, isShowPageSizeOpt: b.isShowPageSizeOpt === false ? false : true, isShowSkip: b.isShowSkip === false ? false : true, isShowRefresh: b.isShowRefresh === false ? false : true, isShowTotalPage: b.isShowTotalPage === false ? false : true, isResetPage: b.isResetPage === true ? true : false, callBack: b.callBack, currPage: 1, pageSize: b.isShowPageSizeOpt === false ? null : s, totalSize: b.totalSize != null ? b.totalSize : null, isShowTotalSize: b.isShowTotalSize === false ? false : true, totalSizeText: b.totalSizeText != null ? b.totalSizeText : "共{}条数据" } } } } if (g.get(0).pageText.totalPage == null || g.get(0).pageText.totalPage < 1) { g.empty(); return } if (g.get(0).pageText.currPage < 1) { g.get(0).pageText.currPage = 1 } else { if (g.get(0).pageText.currPage > g.get(0).pageText.totalPage) { g.get(0).pageText.currPage = g.get(0).pageText.totalPage } } g.get(0).pageText.staticCurrPage = g.get(0).pageText.currPage; g.get(0).pageText.staticPageSize = g.get(0).pageText.pageSize; g.get(0).pageText.staticTotalPage = g.get(0).pageText.totalPage; var h = g.get(0).pageText.currPage < 2 ? "whj_hoverDisable" : "whj_hover"; var e = g.get(0).pageText.currPage >= g.get(0).pageText.totalPage ? "whj_hoverDisable" : "whj_hover"; var q = 0; var f = 0; var y = parseInt(g.get(0).pageText.showPageNum / 2); if (g.get(0).pageText.showPageNum < 2) { f = g.get(0).pageText.currPage } else { if (g.get(0).pageText.totalPage <= g.get(0).pageText.showPageNum) { f = 1 } else { if (g.get(0).pageText.currPage y > g.get(0).pageText.totalPage) { f = g.get(0).pageText.totalPage - g.get(0).pageText.showPageNum 1 } else { if (g.get(0).pageText.currPage - y < 1) { f = 1 } else { f = g.get(0).pageText.currPage - y } } } } var t = ''; if (g.get(0).pageText.isShowFL) { t = '' + g
.get(0).pageText.firstPage + ""
}
t += '' + g
.get(0).pageText.previousPage + "";
if (g.get(0).pageText.showPageNum > 0) {
for (var n = f; n <= g.get(0).pageText.totalPage; n++) {
q++;
var v = g.get(0).pageText.currPage == n ? "whj_checked" : "whj_hover";
t += '' + n + "";
if (q >= g.get(0).pageText.showPageNum) {
break
}
}
}
t += '' + g.get(0)
.pageText.nextPage + "";
if (g.get(0).pageText.isShowFL) {
t += '' + g
.get(0).pageText.lastPage + ""
}
if (g.get(0).pageText.isShowPageSizeOpt) {
t += '"
}
// if (g.get(0).pageText.isShowSkip) {
// t += '' + g.get(0).pageText.skip +
// '' +
// g.get(0).pageText.confirm + ""
// }
// if (g.get(0).pageText.isShowRefresh) {
// t += '' + g
// .get(0).pageText.refresh + ""
// }
if (g.get(0).pageText.isShowTotalPage) {
var p = g.get(0).pageText.totalPageText.replace("{}", g.get(0).pageText.totalPage);
t += '' + p + ""
}
if (g.get(0).pageText.isShowTotalSize) {
var a = g.get(0).pageText.isShowTotalPage ? "whj_totalSizeSingle" : "";
var l = g.get(0).pageText.totalSizeText.replace("{}", g.get(0).pageText.totalSize);
t += '' + l + ""
}
t += "";
g.html(t);
if (g.get(0).pageText.isShowFL) {
if (h == "whj_hover") {
g.find("div[name='whj_firstPage']").click(function() {
if (g.get(0).pageText.isResetPage) {
g.get(0).pageText.pageSize = g.get(0).pageText.staticPageSize
}
g.get(0).pageText.currPage = 1;
u()
})
}
if (e == "whj_hover") {
g.find("div[name='whj_lastPage']").click(function() {
if (g.get(0).pageText.isResetPage) {
g.get(0).pageText.pageSize = g.get(0).pageText.staticPageSize;
g.get(0).pageText.currPage = g.get(0).pageText.staticTotalPage
} else {
g.get(0).pageText.currPage = g.get(0).pageText.totalPage
}
u()
})
}
}
if (h == "whj_hover") {
g.find("div[name='whj_previousPage']").click(function() {
if (g.get(0).pageText.isResetPage) {
g.get(0).pageText.pageSize = g.get(0).pageText.staticPageSize;
g.get(0).pageText.currPage = g.get(0).pageText.staticCurrPage - 1
} else {
g.get(0).pageText.currPage = g.get(0).pageText.currPage - 1
}
u()
})
}
if (e == "whj_hover") {
g.find("div[name='whj_nextPage']").click(function() {
if (g.get(0).pageText.isResetPage) {
g.get(0).pageText.pageSize = g.get(0).pageText.staticPageSize;
g.get(0).pageText.currPage = g.get(0).pageText.staticCurrPage + 1
} else {
g.get(0).pageText.currPage = g.get(0).pageText.currPage + 1
}
u()
})
}
if (g.find("div[name='whj_page']").length > 0) {
g.find("div[name='whj_page']").click(function() {
if (!$(this).hasClass("whj_checked")) {
if (g.get(0).pageText.isResetPage) {
g.get(0).pageText.pageSize = g.get(0).pageText.staticPageSize
}
g.get(0).pageText.currPage = +$(this).data("page");
u()
}
})
}
if (g.get(0).pageText.isShowPageSizeOpt) {
g.find("select[name='whj_pageSize']").change(function() {
var i = +$(this).val();
if (g.get(0).pageText.isResetPage) {
$(this).find("option[value='" + g.get(0).pageText.staticPageSize + "']")
.prop("selected", true)
}
var k = parseInt(g.get(0).pageText.totalSize / i);
if (k * i < g.get(0).pageText.totalSize) {
k++
}
g.get(0).pageText.currPage = 1;
g.get(0).pageText.pageSize = i;
g.get(0).pageText.totalPage = k;
if (!g.get(0).pageText.isResetPage) {
c()
}
u()
})
}
if (g.get(0).pageText.isShowSkip) {
g.find("input[name='whj_toPage']").on("input", function() {
var k = $(this).val();
var i = $(this).val().replace(/\D/g, "");
if (k.length != i.length) {
$(this).val(i)
}
});
g.find("div[name='whj_confirm']").click(function() {
var i = g.find("input[name='whj_toPage']").val();
if (i.length > 0) {
i = +i;
if (i < 1) {
i = 1
} else {
if (i > g.get(0).pageText.totalPage) {
i = g.get(0).pageText.totalPage
}
}
if (g.get(0).pageText.isResetPage) {
g.get(0).pageText.pageSize = g.get(0).pageText.staticPageSize
}
g.get(0).pageText.currPage = i;
u()
}
})
}
if (g.get(0).pageText.isShowRefresh) {
g.find("div[name='whj_refresh']").click(function() {
if (g.get(0).pageText.isResetPage) {
g.get(0).pageText.pageSize = g.get(0).pageText.staticPageSize;
g.get(0).pageText.currPage = g.get(0).pageText.staticCurrPage
}
u()
})
}
function u() {
if (!g.get(0).pageText.isResetPage) {
g.whjPaging()
}
g.get(0).pageText.callBack(g.get(0).pageText.currPage, g.get(0).pageText.pageSize)
}
function c() {
var k = [];
var z = g.get(0).pageText.pageSizeOpt;
for (var i in z) {
if (z[i].value == g.get(0).pageText.pageSize) {
k.push({
value: z[i].value,
text: z[i].text,
selected: true
})
} else {
k.push({
value: z[i].value,
text: z[i].text
})
}
}
g.get(0).pageText.pageSizeOpt = k
}
}
})
})();
2. 动态分页css
@charset "UTF-8";
/**
* @version: v1.8
* @author: xgc-whj
* @date: 2019-05-29 00:00:00
* @license: MIT license release
* @jq22 address: http://www.jq22.com/jquery-info17548
* @GitHub: https://github.com/w0624/jquery-pagination
* @description: jQuery分页插件，可自定义样式，默认有五套样式，可自定义插件选项，简单方便，兼容IE8
*/
/*ccs-1*/
.whj_jqueryPaginationCss-1 {
display: inline-block;
user-select: none;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
}
.whj_jqueryPaginationCss-1 div {
display: inline-block;
vertical-align: middle;
height: 24px;
line-height: 24px;
}
.whj_jqueryPaginationCss-1 .whj_padding {
padding: 1px 9px;
}
.whj_jqueryPaginationCss-1 .whj_bgc {
background-color: #fff;
color: #698ca9;
}
.whj_jqueryPaginationCss-1 .whj_border {
border: 1px solid #5b9fd6;
}
.whj_jqueryPaginationCss-1 .whj_color {
color: #698ca9;
}
.whj_jqueryPaginationCss-1 .whj_hover:hover {
background-color: #d4f1ff;
color: #698ca9;
cursor: pointer;
}
.whj_jqueryPaginationCss-1 .whj_checked {
background-color: #d4f1ff;
color: #698ca9;
}
.whj_jqueryPaginationCss-1 .whj_hoverDisable {
opacity: 0.5;
filter: alpha(opacity=50);
}
.whj_jqueryPaginationCss-1 select {
height: 28px;
vertical-align: middle;
padding: 0px;
outline: none;
}
.whj_jqueryPaginationCss-1 input {
padding: 0px;
height: 26px;
outline: none;
text-align: center;
width: 60px;
vertical-align: middle;
}
.whj_jqueryPaginationCss-1 div, .whj_jqueryPaginationCss-1 input, .whj_jqueryPaginationCss-1 select {
margin: 2px;
}
/*只有设置显示总页数时，该样式才生效*/
.whj_jqueryPaginationCss-1 .whj_totalSizeSingle {
margin-left: -8px;
}
/*ccs-2*/
.whj_jqueryPaginationCss-2 {
display: inline-block;
user-select: none;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
}
.whj_jqueryPaginationCss-2 div {
display: inline-block;
vertical-align: middle;
height: 24px;
line-height: 24px;
}
.whj_jqueryPaginationCss-2 .whj_padding {
padding: 1px 9px;
}
.whj_jqueryPaginationCss-2 .whj_bgc {
background-color: #5194ca;
color: #fff;
}
.whj_jqueryPaginationCss-2 .whj_border {
border: 1px solid #5194ca;
}
.whj_jqueryPaginationCss-2 .whj_color {
color: #5194ca;
}
.whj_jqueryPaginationCss-2 .whj_hover:hover {
background-color: #d4f1ff;
color: #5194ca;
cursor: pointer;
}
.whj_jqueryPaginationCss-2 .whj_checked {
background-color: #d4f1ff;
color: #5194ca;
}
.whj_jqueryPaginationCss-2 .whj_hoverDisable {
opacity: 0.7;
filter: alpha(opacity=70);
}
.whj_jqueryPaginationCss-2 select {
height: 28px;
vertical-align: middle;
padding: 0px;
outline: none;
}
.whj_jqueryPaginationCss-2 input {
padding: 0px;
height: 26px;
outline: none;
text-align: center;
width: 60px;
vertical-align: middle;
}
.whj_jqueryPaginationCss-2 div, .whj_jqueryPaginationCss-2 input, .whj_jqueryPaginationCss-2 select {
margin: 2px;
}
/*只有设置显示总页数时，该样式才生效*/
.whj_jqueryPaginationCss-2 .whj_totalSizeSingle {
margin-left: -8px;
}
/*ccs-3*/
.whj_jqueryPaginationCss-3 {
display: inline-block;
user-select: none;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
}
.whj_jqueryPaginationCss-3 div {
display: inline-block;
vertical-align: middle;
height: 24px;
line-height: 24px;
}
.whj_jqueryPaginationCss-3 .whj_padding {
padding: 1px 9px;
}
.whj_jqueryPaginationCss-3 .whj_bgc {
background-color: #7a7b7b;
color: #fff;
}
.whj_jqueryPaginationCss-3 .whj_border {
border: 1px solid #929292;
}
.whj_jqueryPaginationCss-3 .whj_color {
color: #929292;
}
.whj_jqueryPaginationCss-3 .whj_hover:hover {
background-color: #e0dddd;
color: #7a7b7b;
cursor: pointer;
}
.whj_jqueryPaginationCss-3 .whj_checked {
background-color: #e0dddd;
color: #7a7b7b;
}
.whj_jqueryPaginationCss-3 .whj_hoverDisable {
opacity: 0.5;
filter: alpha(opacity=50);
}
.whj_jqueryPaginationCss-3 select {
height: 28px;
vertical-align: middle;
padding: 0px;
outline: none;
}
.whj_jqueryPaginationCss-3 input {
padding: 0px;
height: 26px;
outline: none;
text-align: center;
width: 60px;
vertical-align: middle;
}
.whj_jqueryPaginationCss-3 div, .whj_jqueryPaginationCss-3 input, .whj_jqueryPaginationCss-3 select {
margin: 2px;
}
/*只有设置显示总页数时，该样式才生效*/
.whj_jqueryPaginationCss-3 .whj_totalSizeSingle {
margin-left: -8px;
}
/*ccs-4*/
.whj_jqueryPaginationCss-4 {
display: inline-block;
user-select: none;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
}
.whj_jqueryPaginationCss-4 div {
display: inline-block;
vertical-align: middle;
height: 24px;
line-height: 24px;
}
.whj_jqueryPaginationCss-4 .whj_padding {
padding: 1px 9px;
}
.whj_jqueryPaginationCss-4 .whj_bgc {
background-color: #f5f5f5;
color: #907272;
}
.whj_jqueryPaginationCss-4 .whj_border {
border: 1px solid #907272;
}
.whj_jqueryPaginationCss-4 .whj_color {
color: #907272;
}
.whj_jqueryPaginationCss-4 .whj_hover:hover {
background-color: #afacac;
color: #fff;
cursor: pointer;
}
.whj_jqueryPaginationCss-4 .whj_checked {
background-color: #afacac;
color: #fff;
}
.whj_jqueryPaginationCss-4 .whj_hoverDisable {
opacity: 0.5;
filter: alpha(opacity=50);
}
.whj_jqueryPaginationCss-4 select {
height: 28px;
vertical-align: middle;
padding: 0px;
outline: none;
}
.whj_jqueryPaginationCss-4 input {
padding: 0px;
height: 26px;
outline: none;
text-align: center;
width: 60px;
vertical-align: middle;
}
.whj_jqueryPaginationCss-4 div, .whj_jqueryPaginationCss-4 input, .whj_jqueryPaginationCss-4 select {
margin: 2px;
}
/*只有设置显示总页数时，该样式才生效*/
.whj_jqueryPaginationCss-4 .whj_totalSizeSingle {
margin-left: -8px;
}
/*ccs-5*/
.whj_jqueryPaginationCss-5 {
display: inline-block;
user-select: none;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
}
.whj_jqueryPaginationCss-5 div {
display: inline-block;
vertical-align: middle;
height: 24px;
line-height: 24px;
}
.whj_jqueryPaginationCss-5 .whj_padding {
padding: 1px 9px;
}
.whj_jqueryPaginationCss-5 .whj_bgc {
background-color: #199eaf;
color: #fff;
}
.whj_jqueryPaginationCss-5 .whj_border {
border: 1px solid #199eaf;
}
.whj_jqueryPaginationCss-5 .whj_color {
color: #199eaf;
}
.whj_jqueryPaginationCss-5 .whj_hover:hover {
background-color: #d4f1ff;
color: #199eaf;
cursor: pointer;
}
.whj_jqueryPaginationCss-5 .whj_checked {
background-color: #d4f1ff;
color: #199eaf;
}
.whj_jqueryPaginationCss-5 .whj_hoverDisable {
opacity: 0.5;
filter: alpha(opacity=50);
}
.whj_jqueryPaginationCss-5 select {
height: 28px;
vertical-align: middle;
padding: 0px;
outline: none;
}
.whj_jqueryPaginationCss-5 input {
padding: 0px;
height: 26px;
outline: none;
text-align: center;
width: 60px;
vertical-align: middle;
}
.whj_jqueryPaginationCss-5 div, .whj_jqueryPaginationCss-5 input, .whj_jqueryPaginationCss-5 select {
margin: 2px;
}
/*只有设置显示总页数时，该样式才生效*/
.whj_jqueryPaginationCss-5 .whj_totalSizeSingle {
margin-left: -8px;
}
3. 页面设置
4. 接口请求
listQuery = {
page: 1,//第一页
limit: 8//每页展示8条数据
};
//请求接口获取数据
function getListMsg(data) {
$.ajax({
type: "post",//请求方式
contentType: "application/json",
url: //接口地址,
dataType: "json",
data: JSON.stringify(data),
success: function(res) {
if (res.resultCode === "00000000") {
//设置分页插件显示
// currPage: 当前页码, totalPage: 总页数, totalSize: 总条数;
$("#pagination").whjPaging("setPage", {
currPage: res.data.current_page,
totalPage: Math.ceil(res.data.total / res.data.per_page),
totalSize: res.data.total
});
render(res.data.data);//传入数据，进行渲染
}
}
});
}
$("#pagination").whjPaging({
//设为true时，ajax里的success函数必须调用setPage方法，否则分页插件显示保持不变
isResetPage: true,
callBack: function(currPage, pageSize) {
listQuery.page = currPage;
listQuery.limit = pageSize;
getListMsg(listQuery);
}
});
//渲染页面
function render(data) {
let prostr = '';
if (data) {
data.forEach((item, index) => {
prostr += 需要渲染的页面结构
})
}
$(放在那个标签页面).html(prostr);
};
