前端分页页码展示逻辑封装函数
作者：秋了秋 发表时间：2017年04月21日
这里说的分页是页码的设计分页，并不是内容的分页，内容的分页可以看这篇文章《前端实现静态分页展示内容》，这里不多讲了，前端实现内容分页不好，不好，不好。所以今天讲后端分页，但是页码由前端设计，这个页码逻辑理论上适用于前后端，就是处理用...省略页码，大概的样子如下（分为三种情况）：
具体的实现逻辑可以看我写的一个封装函数，只需要调用三个参数即可(当前页，总页数，分页链接的公共部分)。
function pageInit(current,total,link){
current=parseInt(current),total=parseInt(total);
var count = 6;
var preLink = current > 1 ? link + (current-1) : "javascript:void(0)";
var nextLink = current < total ? link + (current+1) : "javascript:void(0)";
var html = '<div class="pages"><b>'+current+'</b>/'+total+' Pages <a href="'+preLink+'" '+(current > 1 ? "":"class=\"no-link\"")+'>«</a>';
if(total <= count){
for(var i=1;i<=total;i++){
var pageTag = i == current ? '<span class="act">'+current+'</span>' : '<a href="'+link+i+'">'+i+'</a>'
html += pageTag;
}
}else{
var i = parseInt(current - count/2) < 2 ? 2 : parseInt(current-count/2);
var end = (parseInt(current + count/2) > (total - 1)) ? (total-1) : parseInt(current+count/2);
console.log(current,count/2)
html += (current==1) ? '<span class="act">1</span>':'<a href="'+link+'1">1</a> '+(i > 2 ? "..." :"");
for(; i <= end; i++){
var pageTag = (i == current) ? '<span class="act">'+current+'</span>' : '<a href="'+(link+i)+'">'+i+'</a>'
html += pageTag;
}
html += (end < (total - 2) ? "..." : "")+((current == total) ? '<span class="act">'+total+'</span>':' <a href="'+link+total+'">'+total+'</a>');
}
html += '<a href="'+nextLink+'" '+(current < total ? "":"class=\"no-link\"")+'>»</a></div>';
return html;
}
样式就自己写了，具体的结构输出到页面中就就可以看到，根据我的Dom树结构来写样式即可。调用方法：
document.getElementById("page").innerHTML = pageInit(5,56,"?page=");
前两个参数叫后端传给你（第一个是当前所属的页码，第二个参数的总的页码数）,第三个参数观察所有分页链接的公共部分。
1
文章作者： “秋了秋”个人博客，本站鼓励原创。
转载请注明本文地址：http://netblog.cn/blog/481.html