简单分页的制作思路及实现-CSDN博客

最近项目用到分页功能，上网搜一下，确实有许多框架可以实现，但因为一个分页，给页面引入一个大的框架，实在感觉得不偿失，所以想自己动手写一个！

在写代码之前，先分析分页的实现思路，将一个分页的实现分为两个部分：

1.index（当前页码）=1

index=1时，可以分为以下几种情况：

（1）index=1，total=1（分页的总页数）此时分页形式为 :< 1 > ,左右箭头都为冻结状态，不可点。

（2）假如step=2，total<= index+step 时，此时的<123>,此时23>都可以点击。

（3）假如step=2.total=23,total>index+step时，此时<123...23>,此时除了<1 处于冻结状态外，其他都可以点击。

2.index>=2

在分析以前，先设置一个控制分页首尾的对象：var range = { start:index - step;end:index +step };

可以分为以下几种情况：

（1）range.start < 0 && range.end <= total

设置range.start = 1和range.end = total.分页的形式为：<123>,此时除了index页不可点外，其他页都可以点击。

（2）range.start < 0 && range.end > total

设置range.start = 1和range.end不变.分页的形式为：<123...>,此时除了index页不可点外，其他页都可以点击。

（3）range.start > 0 && range.end < total

设置range.end = total，range.start不变。此时分页的形式为：<1...23456>,同上。

（4）range.start > 0 && range.end > total

range.start和range.end的值都不变，分页形式如下<1...23456...23>.

以上的内容大概包含了分页中遇到的各种情况，接下来就是用代码实现即可。小弟不才，实现如下，但代码雍容，可精简处颇多，望高手多多提出意见！

function create_page_number(index,total,step,fun,flag){
  var page_number = {};
  page_number.container = document.createElement("div");
  page_number.container.className = "page_number";
  page_number.index = index;
  page_number.total = total;
  page_number.step = step;
  page_number.fun = fun;

  page_number.range = {                                  
    start:page_number.index - page_number.step,
    end:page_number.index + page_number.step
  };
    
 
  if(page_number.index === 1){
    var span_pre = document.createElement("span");
    span_pre.innerHTML = "&lt";
    var span_index = document.createElement("span");
    span_index.innerHTML = "1";
    page_number.container.appendChild(span_pre);
    page_number.container.appendChild(span_index);
    if(page_number.index === page_number.total){
      var span_next = document.createElement("span");
      span_next.innerHTML = "&gt";
      page_number.container.appendChild(span_next);
    }else if(page_number.range.end >= page_number.total){
      page_number.range.end = page_number.total;
      for(var i = 2;i <= page_number.range.end;i++){
        var a_num = document.createElement("a");
        a_num.className = "num";
        a_num.innerHTML = i;
        a_num.href = "javascript:"+fun+"(" + i +","+flag+")";
        page_number.container.appendChild(a_num);
      }
        var a_next = document.createElement("a");
        a_next.href="javascript:"+fun+"(" + (page_number.index + 1) +","+flag+")";
        a_next.innerHTML = '&gt';
        page_number.container.appendChild(a_next);
    }else {
      for(var i = 2;i <= page_number.range.end;i++){
        var a_num = document.createElement("a");
        a_num.className = "num";
        a_num.innerHTML = i;
        a_num.href = "javascript:"+fun+"(" + i +","+flag+")";
        page_number.container.appendChild(a_num);
      }
      var a_more_right = document.createElement("a");
      a_more_right.className = "num";
      a_more_right.href="javascript:"+fun+"(" + (page_number.index + 2) +","+flag+")";
      a_more_right.innerHTML = "...";
      page_number.container.appendChild(a_more_right);
      var a_final = document.createElement("a");
      a_final.className = "num";
      a_final.href="javascript:"+fun+"(" + page_number.total +","+flag+")";
      a_final.innerHTML = page_number.total;
      page_number.container.appendChild(a_final);
      var a_next = document.createElement("a");
      a_next.href="javascript:"+fun+"(" + (page_number.index + 1) +","+flag+")";
      a_next.innerHTML = '&gt';
      page_number.container.appendChild(a_next);
    }
  }  

  if(page_number.index >=2){  
    var a_pre = document.createElement("a");
    a_pre.href="javascript:"+fun+"(" + (page_number.index - 1) +","+flag+")";
    a_pre.innerHTML = "&lt";
    a_first = document.createElement("a");
    a_first.className = "num";
    a_first.href="javascript:"+fun+"(" + 1 +","+flag+")";    
    a_first.innerHTML = "1";
    page_number.container.appendChild(a_pre);
    page_number.container.appendChild(a_first);
    if(page_number.range.start <= 0 && page_number.range.end >= page_number.total){
      if(page_number.range.start <= 0){
        page_number.range.start = 1;
      }  
      if(page_number.range.end >= page_number.total){
        page_number.range.end = total;
      }
      for(var i = page_number.range.start+1;i <= page_number.range.end;i++){
        if(i != page_number.index){
          var a_num = document.createElement("a");
          a_num.innerHTML = i;
          a_num.className = "num";
          a_num.href = "javascript:"+fun+"(" + i +","+flag+")";
          page_number.container.appendChild(a_num);
        }else if(i === page_number.index){
          var a_index = document.createElement("span");
          a_index.innerHTML = i;
          page_number.container.appendChild(a_index);
        }        
      };
      if(page_number.index === page_number.total){
        var span_next = document.createElement("span")
        span_next.innerHTML = '&gt';
        page_number.container.appendChild(span_next);
      }else{
        var a_next = document.createElement("a");
        a_next.href="javascript:"+fun+"(" + (page_number.index + 1) +","+flag+")";
        a_next.innerHTML = '&gt';
        page_number.container.appendChild(a_next);        
      }     
    }else if(page_number.range.start <= 0 && page_number.range.end < page_number.total){
      if(page_number.range.start <= 0){
        page_number.range.start = 1;
      }
      for(var i = page_number.range.start+1;i <= page_number.range.end;i++){
        if(i != page_number.index){
          var a_num = document.createElement("a");
          a_num.className = "num";
          a_num.innerHTML = i;
          a_num.href="javascript:"+fun+"(" + i +","+flag+")";
          page_number.container.appendChild(a_num);
        }else if(i === page_number.index){
          var a_index = document.createElement("span");
          a_index.innerHTML = i;
          page_number.container.appendChild(a_index);
        }
      }
      var a_more_right = document.createElement("a");
      a_num.className = "num";
      a_more_right.href="javascript:"+fun+"(" + (page_number.index + 2) +","+flag+")";
      a_more_right.innerHTML = "...";
      page_number.container.appendChild(a_more_right);
      var a_final = document.createElement("a");
      a_final.href="javascript:"+fun+"(" + page_number.total +","+flag+")";
      a_final.className = "num";
      a_final.innerHTML = page_number.total;
      page_number.container.appendChild(a_final);
      var a_next = document.createElement("a");
      a_next.href="javascript:"+fun+"(" + (page_number.index + 1) +","+flag+")";
      a_next.innerHTML = '&gt';
      page_number.container.appendChild(a_next);         
    }else if(page_number.range.start > 0 && page_number.range.end < page_number.total){
      var a_more = document.createElement("a");
      a_more.href="javascript:"+fun+"(" + (page_number.index - 2) +","+flag+")";
      a_more.className = "num";
      a_more.innerHTML = "...";
      page_number.container.appendChild(a_more);
      for(var i = page_number.range.start;i <= page_number.range.end;i++){
        if(i != page_number.index){
          var a_num = document.createElement("a");
          a_num.href="javascript:"+fun+"(" + i +","+flag+")";
          a_num.className = "num";
          a_num.innerHTML = i;
          page_number.container.appendChild(a_num);
        }else if(i === page_number.index){
          var a_index = document.createElement("span");
          a_index.innerHTML = i;
          page_number.container.appendChild(a_index);
        }
      }
      var a_more_right = document.createElement("a");
      a_more_right.innerHTML = "...";
      a_more_right.className = "num";
      a_more_right.href="javascript:fun(" + (page_number.index + 2) +","+flag+")";      
      page_number.container.appendChild(a_more_right);
      var a_final = document.createElement("a");
      a_final.className = "num";
      a_final.href="javascript:"+fun+"(" + page_number.total +","+flag+")";      
      a_final.innerHTML = page_number.total;
      page_number.container.appendChild(a_final);
      var a_next = document.createElement("a");
      a_next.href="javascript:"+fun+"(" + (page_number.index + 1) +","+flag+")";
      a_next.className = "num";
      a_next.innerHTML = '&gt';
      page_number.container.appendChild(a_next);      
    }else if(page_number.range.start > 0 && page_number.range.end >= page_number.total){
      if(page_number.range.end >= page_number.total){
        page_number.range.end = total;
      }
      var a_more = document.createElement("a");
      a_more.href="javascript:"+fun+"(" + (page_number.index - 2) +","+flag+")";      
      a_more.className = 'num';
      a_more.innerHTML = "...";
      page_number.container.appendChild(a_more);
      for(var i = page_number.range.start;i <= page_number.range.end;i++){
        if(i != page_number.index){
          var a_num = document.createElement("a");
          a_num.href="javascript:"+fun+"(" + i +","+flag+")";
          a_num.className = "num";
          a_num.innerHTML = i;
          page_number.container.appendChild(a_num);
        }else if(i === page_number.index){
          var a_index = document.createElement("span");
          a_index.innerHTML = i;
          page_number.container.appendChild(a_index);
        }
      }
      if(page_number.index === page_number.total){
        var span_next = document.createElement("span");
        span_next.innerHTML = '&gt';
        page_number.container.appendChild(span_next);
      }else{
        var a_next = document.createElement("a");
        a_next.href="javascript:"+fun+"(" + (page_number.index + 1) +","+flag+")";        
        a_next.innerHTML = '&gt';
        page_number.container.appendChild(a_next);
      }  
    }
  }
  return page_number.container;
}

转载于:https://my.oschina.net/u/564368/blog/111169