当前位置:秋叶网络博客 前端设计 ◊ 前端分页页码展示逻辑封装函数

前端分页页码展示逻辑封装函数

作者:秋叶 发表时间:2017年4月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=");

前两个参数叫后端传给你(第一个是当前所属的页码,第二个参数的总的页码数),第三个参数观察所有分页链接的公共部分。

目录: 前端设计 | 标签: , | 5572次阅读