实现方式
采用jquery手写分页组件,实现页面显示的页码数量固定,并且当前页在中间显示。
这里只放前端jquery代码,后端数据就不放了。
实现代码
/**
从后台传来的数据包括:当前页数、总页数、等等
下面代码实现的效果就是:根据总页数进行判断,如果总页数小于五个 则加载所有页,大于5页的话就加载当前页码的前2页和后2页,当前页码在中间显示。以下代码的思路很重要,可以忽略onclick事件和a标签 这些都是根据业务 需求进行改变的。
*/
var dqPage = res.currentPage;//得到当前页数
dqPage = parseInt(dqPage);//得到的文本转成int
var pageCount = res.totalPage;//得到总页数
pageCount = parseInt(pageCount);
var i = 1;
i = parseInt(i);
var item="";
if (pageCount <= 5 ) {//总页数小于五页,则加载所有页
for (i; i <= pageCount; i++) {
//前一页li显示
if(i==1){
if(dqPage==1){
item+="<li class='disabled'><a href='javascript:;' aria-label='Previous'><span aria-hidden='true'>«</span></a></li>";
}else{
item+="<li><a href='javascript:;' aria-label='Previous' onclick='pageToActionService("+(dqPage-2)+")'><span aria-hidden='true'>«</span></a></li>";
}
}
if (i == dqPage) {
item += "<li><a href='javascript:;' style='color: black;'>"+i+"</a></li>";
}else{
// item += "<a href='"+href+i+"' >"+i+"</a>";
item += "<li><a href='javascript:;' onclick='pageToActionService("+(i-1)+")'>"+i+"</a></li>";
}
//后一页li显示
if(i==pageCount){
if(dqPage==pageCount){
item +="<li class='disabled'><a href='javascript:;' aria-label='Next'><span aria-hidden='true'>»</span></a></li>";
}else{
item +="<li><a href='javascript:;' aria-label='Next' onclick='pageToActionService("+(dqPage)+")'><span aria-hidden='true'>»</span></a></li>";
}
}
};
$('#pageBtn').html(item);
return;
}else if (pageCount > 5) {//总页数大于五页,则加载五页
if (dqPage <= 3) {//当前页 小于等于3,加载1-5页
for (i; i <= 5; i++) {
//前一页显示
if(i==1){
if(dqPage==1){
item+="<li class='disabled'><a href='javascript:;' aria-label='Previous'><span aria-hidden='true'>«</span></a></li>";
}else{
item+="<li><a href='javascript:;' aria-label='Previous' onclick='pageToActionService("+(dqPage-2)+")'><span aria-hidden='true'>«</span></a></li>";
}
}
if (i == dqPage) {
item += "<li><a href='javascript:;' style='color: black;'>"+i+"</a></li>";
}else{
item += "<li><a href='javascript:;' onclick='pageToActionService("+(i-1)+")'>"+i+"</a></li>";
}
//后一页显示
if(i==5){
if(dqPage==5){
item +="<li class='disabled'><a href='javascript:;' aria-label='Next'><span aria-hidden='true'>»</span></a></li>";
}else{
item +="<li><a href='javascript:;' aria-label='Next' onclick='pageToActionService("+(dqPage)+")'><span aria-hidden='true'>»</span></a></li>";
}
}
};
$('#pageBtn').html(item);
return;
}else if (dqPage > 3) {//当前页大于3页
//当前页>=总页码-2时 显示 最后5页
if(dqPage>=pageCount-2){
for(i=pageCount-4;i<=pageCount;i++){
//前一页显示
if(i==pageCount-4){
item+="<li><a href='javascript:;' aria-label='Previous' onclick='pageToActionService("+(dqPage-2)+")'><span aria-hidden='true'>«</span></a></li>";
}
if(i==dqPage){
item +="<li><a href='javascript:;' style='color: black;'>"+i+"</a></li>";
}else{
item +="<li><a href='javascript:;' onclick='pageToActionService("+(i-1)+")'>"+i+"</a></li>";
}
//后一页显示
if(i==pageCount){
if(dqPage==pageCount){
item +="<li class='disabled'><a href='javascript:;' aria-label='Next'><span aria-hidden='true'>»</span></a></li>";
}else{
item +="<li><a href='javascript:;' aria-label='Next' onclick='pageToActionService("+(dqPage)+")'><span aria-hidden='true'>»</span></a></li>";
}
}
}
}else{
//大于3 总页码大于当前页的+2
for(i=dqPage-2;i<=dqPage+2;i++){
//前一页显示
if(i==dqPage-2){
item+="<li><a href='javascript:;' aria-label='Previous' onclick='pageToActionService("+(dqPage-2)+")'><span aria-hidden='true'>«</span></a></li>";
}
if(i==dqPage){
item +="<li><a href='javascript:;' style='color: black;'>"+i+"</a></li>";
}else{
item +="<li><a href='javascript:;' onclick='pageToActionService("+(i-1)+")'>"+i+"</a></li>";
}
//后一页显示
if(i==dqPage+2){
item +="<li ><a href='javascript:;' aria-label='Next' onclick='pageToActionService("+(dqPage)+")'><span aria-hidden='true'>»</span></a></li>";
}
}
}
$('#pageBtn').html(item);
return;
}
}
实现效果
效果如图所示:
如果总页码小与5页 效果如下: