web前端jquery分页查询的实现
程序员文章站
2022-07-14 23:08:49
...
js部分：
function pagination=function(url,data){
//data是一个对象,请求数据时所需要的条件
//url:接口
var myBrowser = frag.myBrowser();
if (myBrowser == "Firefox") {
var q = 14;
} else {
var result1 = window.matchMedia('(min-width:1900px)');
var result2 = window.matchMedia('(min-width:1500px)');
var result3 = window.matchMedia('(min-width:1200px)');
if (result1.matches) {
var q = 14;
} else if (result2.matches) {
var q = 12;
} else if (result3.matches) {
var q = 10;
} else {
var q = 8;
}
}
if (data != undefined) {
data.pageSize = q;
} else {
data = {};
data.pageSize = q;
}
if (data.pageNum != undefined) {
var pageNum = data.pageNum;
} else {
data.pageNum = 1;
}
var parentClass = "";
$.ajax({
type: "post",
url: urll,
async: true,
data: data,
success: function (retData) {
console.log(retData);
var datas = null;
if (retData.data != null) {
datas = retData.data.result;
work.createTablee(datas, urll);
var keys = [],
val = [];
for (var i in data) {
if (i != "pageNum" && i != "pageSize") {
keys.push(i);
val.push(data[i]);
}
}
var dataArr = keys.reduce((result, value, index) => {
result[value] = val[index];
return result;
}, {});
//获取页面的total,判断是否需要分页
if (retData.data.total > q) {
$("" + parentClass + ".fenye").show();
$("" + parentClass + ".pagenum").text(retData.data.total);
var pagenum = Math.ceil(retData.data.total / q);
var frag = 1;
calculate(1);
function calculate(k) {
var hh = `
<li class="leftPre">
<a style="cursor:pointer;">首页</a>
</li>
<li class="pre" style="display:none">
<a aria-label="Previous" style="cursor:pointer;">上一页</a>
</li>`;
if (pagenum > 5) {
if (k == 1 || k == 2 || k == 3) {
for (var n = 1; n <= 5; n++) {
hh += `<li class="num" ><a style="cursor:pointer;">${n}</a></li>`;
}
hh += `<li class="rightDian"><a style="cursor:not-allowed">...</a></li>`;
} else if (3 < k && k < pagenum - 2) {
hh += `<li class="leftDian" ><a style="cursor:not-allowed">...</a></li>`;
hh += `<li class="num"><a style="cursor:pointer;">${k - 2}</a></li>`;
hh += `<li class="num"><a style="cursor:pointer;">${k - 1}</a></li>`;
hh += `<li class="num"><a style="cursor:pointer;">${k}</a></li>`;
hh += `<li class="num"><a style="cursor:pointer;">${k + 1}</a></li>`;
hh += `<li class="num"><a style="cursor:pointer;">${k + 2}</a></li>`;
hh += `<li class="rightDian" ><a style="cursor:not-allowed">...</a></li>`;
} else if (k >= pagenum - 2) {
hh += `<li class="leftDian" ><a style="cursor:not-allowed">...</a></li>`;
hh += `<li class="num"><a style="cursor:pointer;">${pagenum - 4}</a></li>`;
hh += `<li class="num"><a style="cursor:pointer;">${pagenum - 3}</a></li>`;
hh += `<li class="num"><a style="cursor:pointer;">${pagenum - 2}</a></li>`;
hh += `<li class="num"><a style="cursor:pointer;">${pagenum - 1}</a></li>`;
hh += `<li class="num"><a style="cursor:pointer;">${pagenum}</a></li>`;
}
} else {
for (var n = 1; n <= pagenum; n++) {
hh += `<li class="num" ><a style="cursor:pointer;">${n}</a></li>`;
}
}
hh += `</ul></li><li class="postfix">
<a aria-label="Next" style="cursor:pointer;">下一页</a>
</li>
<li class="leftPostfix">
<a style="cursor:pointer;">末页</a>
</li>`;
$("" + parentClass + " .pagination").html(hh);
if (k <= 3) {
$($("" + parentClass + ".num").get(k - 1)).addClass("active");
} else if (k > 3 && k <= pagenum - 2) {
$($("" + parentClass + ".num").get(2)).addClass("active");
} else if (k > pagenum - 2) {
var l = $("" + parentClass + ".num").length;
if (k == pagenum - 1) {
$($("" + parentClass + ".num").get(l - 2)).addClass("active");
} else if (k == pagenum) {
$($("" + parentClass + ".num").get(l - 1)).addClass("active");
}
}
//上一页
if (k >= 2) {
$("" + parentClass + ".pre").show();
}
//下一页
if (k == pagenum) {
$("" + parentClass + ".postfix").hide();
}
//计算分页的宽度，便于居中
if (pagenum < 6) {
var ww = pagenum * 47 + 312;
} else {
if (k <= 3 || k > pagenum - 2) {
var ww = 313 + 6 * 47;
} else if (k > 3 && k <= pagenum - 2) {
var ww = 313 + 7 * 47;
console.log(ww);
}
}
$("" + parentClass + " .pagination").css("width", ww + 'px');
}
if (pageNum == undefined) {
$("" + parentClass + " .pre").next().addClass("active");
} else {
$("" + parentClass + ".num").each(function (k, v) {
var k = parseInt(v.childNodes.item(0).innerText);
if (k == pageNum) {
$(v).addClass("active");
}
})
}
$("" + parentClass + ".pagination").children().click(function (e) {
e.stopPropagation();
var e = this;
clickEvent(e);
})
function clickEvent(e) {
if (e.className == "leftPre") {
frag = 1;
queryData(1, q);
// var addClass = $(e).parent().children().get(2);
// $(addClass).addClass("active");
// $(e).parent().children().not(addClass).removeClass("active");
calculate(1);
$("" + parentClass + ".pagination").children().click(function (e) {
e.stopPropagation();
var e = this;
clickEvent(e);
})
}
if (e.className == "pre") {
if (frag > 1) {
frag--;
if (frag <= pagenum) {
queryData(frag, q);
} else if (frag > pagenum) {
frag = 1;
queryData(frag, q);
}
var addClass = $(e).parent().children().get(frag + 1);
$(addClass).addClass("active");
$(e).parent().children().not(addClass).removeClass("active");
var arr = [];
$("" + parentClass + ".num").each(function (k, v) {
arr.push(v);
})
$.each(arr, function (k, v) {
var s = parseInt(v.innerText);
if (s == frag) {
calculate(s);
$("" + parentClass + ".pagination").children().click(function (e) {
e.stopPropagation();
var e = this;
clickEvent(e);
})
}
})
}
}
if (e.className == "num") {
var num = Number(e.innerText);
queryData(num, q);
frag = num;
$(e).addClass("active");
$(e).parent().children().not(e).removeClass("active");
var that = parseInt($(e).text());
var arr = [];
$("" + parentClass + ".num").each(function (k, v) {
arr.push(v);
})
$.each(arr, function (k, v) {
var s = parseInt(v.innerText);
if (s == that) {
calculate(s);
$("" + parentClass + ".pagination").children().click(function (e) {
e.stopPropagation();
var e = this;
clickEvent(e);
})
}
})
}
if (e.className == "postfix") {
frag++;
if (frag <= pagenum) {
queryData(frag, q);
} else if (frag > pagenum) {
frag = 1;
queryData(frag, q);
}
var addClass = $(e).parent().children().get(frag + 1);
$(addClass).addClass("active");
$(e).parent().children().not(addClass).removeClass("active");
var arr = [];
$("" + parentClass + ".num").each(function (k, v) {
arr.push(v);
})
$.each(arr, function (k, v) {
var s = parseInt(v.innerText);
if (s == frag) {
calculate(s);
$("" + parentClass + ".pagination").children().click(function (e) {
e.stopPropagation();
var e = this;
clickEvent(e);
})
}
})
}
if (e.className == "leftPostfix") {
frag = pagenum;
queryData(pagenum, q);
// var addClass = $(e).parent().children().get(pagenum + 1);
// $(addClass).addClass("active");
// $(e).parent().children().not(addClass).removeClass("active");
calculate(pagenum);
$("" + parentClass + ".pagination").children().click(function (e) {
e.stopPropagation();
var e = this;
clickEvent(e);
})
}
}
function queryData(num, size) {
dataArr.pageNum = num;
dataArr.pageSize = size;
$.ajax({
type: "post",
url: urll,
async: true,
data: dataArr,
success: function (reData) {
var dataa = reData.data.result;
f = 1;
work.createTablee(dataa, urll, dataArr.pageNum);
},
error: function (data) {
console.log(data.msg);
}
});
}
} else {
$("" + parentClass + ".fenye").hide();
}
} else {
datas = "";
}
},
error: function (data) {
frag.errorTip(data.msg);
}
});
}
调用方式： pagination(urrl, postData);
html 部分：
<div class="fenye" style="position: relative;width:100%;height: 116px;display: none; ">
<div class="fenyeCon">
<nav aria-label="Page navigation" class="fenyeMain">
<ul class="pagination" style="margin: 0 auto;">
<li class="pre">
<a href="#" aria-label="Previous">
<i class="fa fa-angle-left" aria-hidden="true"></i>
</a>
</li>
<li class="postfix">
<a href="#" aria-label="Next">
<i class="fa fa-angle-right" aria-hidden="true"></i>
</a>
</li>
</ul>
</nav>
</div>
</div>
less部分
.fenye {
bottom: 0;
width: 92%;
display: none;
height: 89px;
border: 1px solid transparent;
&>div {
padding: 0;
height: 36px;
margin: 38px auto 0;
transform: translateY(-50%);
}
div.fenyeCon {
.fenyeMain {
height: 100%;
display: block;
margin: 0 auto;
.pagination {
height: 100%;
display: block;
margin: 0 auto;
li {
width: 35px;
height: 33px;
a {
line-height: 21px;
margin-left: 9px;
background: rgba(255, 255, 255, 1);
border: 1px solid rgba(245, 245, 245, 1);
box-shadow: 0px 1px 2px 0px rgba(120, 135, 142, 0.2);
color: #708BB2;
padding: 6px 13px;
border-radius: 0;
text-align: center;
}
}
li:hover {
a {
background: rgba(48, 173, 200, 1);
border: 1px solid rgba(42, 160, 186, 1);
color: #fff;
box-shadow: 1px 2px 3px 0px rgba(15, 158, 167, 0.2);
}
}
.pre,
.postfix,
.leftPre,
.leftPostfix {
a {
border: none;
background: none;
background: rgba(255, 255, 255, 1);
border: 1px solid rgba(245, 245, 245, 1);
box-shadow: 0px 1px 2px 0px rgba(120, 135, 142, 0.2);
font-size: 12px;
text-align: center;
}
}
.pre,
.postfix {
a {
width: 80px;
height: 35px;
border-radius: 5px;
}
}
.leftPre,
.leftPostfix {
a {
width: 58px;
height: 35px;
}
}
.active {
border-color: none;
border: none;
background-color: none;
&>a {
background: rgba(48, 173, 200, 1);
border: 1px solid rgba(42, 160, 186, 1);
color: #fff !important;
box-shadow: 1px 2px 3px 0px rgba(15, 158, 167, 0.2);
}
}
}
}
}
}
上一篇： 习惯养成之终篇