ajax实现分页页签

在一些搜索列表的页面中，我们会遇到一些需要处理页签的需求，一般这样的页面，要么是在JSP中处理，每次都跳页。这样做是个很方便的方法。但是如果页面上有很多和列表无关，每次都需要重新渲染是不是显得慢了一些。那么，还有另一种方法——ajax请求列表，这种方法同样需要和后端预定接口格式，但是这里只描述分页这块的事情，为了专注于分页的逻辑，页签的式样我就用bootstrap来处理。

<ul class="pagination">
    <li data-pagenum="0" class="active"><a href="javascript:void(0);">1</a>
    </li>
    <li data-pagenum="1"><a href="javascript:void(0);">2</a>
    </li>
    <li data-pagenum="2"><a href="javascript:void(0);">3</a>
    </li>
    <li data-pagenum="3"><a href="javascript:void(0);">4</a>
    </li>
    <li data-pagenum="4"><a href="javascript:void(0);">5</a>
    </li>
    <li data-pagenum="5"><a href="javascript:void(0);">6</a>
    </li>
    <li data-pagenum="6"><a href="javascript:void(0);">7</a>
    </li>
    <li data-pagenum="7"><a href="javascript:void(0);">8</a>
    </li>
    <li data-pagenum="8"><a href="javascript:void(0);">9</a>
    </li>
    <li data-pagenum="1"><a href="javascript:void(0);">下一页</a>
    </li>
    <li data-pagenum="5559"><a href="javascript:void(0);">尾页</a>
    </li>
</ul>

接下来我们专注逻辑部分

既然要处理页签，就不得不提到接口返回了那些数据，一般来说除了返回请求的list外还应给有总共有多少条信息count，

总页数totalPage， 当前页curPage。当然也有其他的信息，不过有上面3个信息就已经可以处理页签了。

我们封装一个专门处理页签的函数function setPageFoot(count, totalPage, curPage){}

/*分页 设置*/
    function setPageFoot(count, totalPage, curPage){
      
      var pageStr = '';
      var i_page_start = 0;
      var i_page_end = 9;
      if(totalPage < 9){
        i_page_end = totalPage;
      }else{

        if((curPage + 8) <= (totalPage-1)){
          i_page_end = curPage + 8;
        }else if((curPage + 7) <= (totalPage-1)){
          i_page_end = curPage + 7;
        }else if((curPage + 6) <= (totalPage-1)){
          i_page_end = curPage + 6;
        }else if((curPage + 5) <= (totalPage-1)){
          i_page_end = curPage + 5;
        }else if((curPage + 4) <= (totalPage-1)){
          i_page_end = curPage + 4;
        }else if((curPage + 3) <= (totalPage-1)){
          i_page_end = curPage + 3;
        }else if((curPage + 2) <= (totalPage-1)){
          i_page_end = curPage + 2;
        }else if((curPage + 1) <= (totalPage-1)){
          i_page_end = curPage + 1;
        }else{
          i_page_end = curPage;
        }
        i_page_start = i_page_end-8;
      }

      if(curPage >= 4 && curPage + 4 < totalPage - 1){
        i_page_start -= 4;
        i_page_end -= 3;
      }

      var pageItems = [];
      if(curPage > 0){
        pageItems.push({
          'txt': '首页',
          'data-pageNum': 0
        });
        if(i_page_start > 0){
          pageItems.push({
            'txt': '上一页',
            'data-pageNum': i_page_start-1
          });
        }
      }
      for(; i_page_start <= i_page_end; i_page_start ++){
        var pageItem = {
          'txt': i_page_start + 1 + '',
          'data-pageNum': i_page_start
        }
        pageItems.push(pageItem);
      }

      if(curPage < totalPage - 1){
        if(curPage < totalPage-1){
          pageItems.push({
            'txt': '下一页',
            'data-pageNum': curPage + 1
          });
        }
        pageItems.push({
          'txt': '尾页',
          'data-pageNum': totalPage - 1
        });
      }      

      $.each(pageItems, function (i,v){
        var pageStrItem = '<li data-pageNum="'+v['data-pageNum']+'"><a href="javascript:void(0);">'+v.txt+'</a></li>';
        if(v['data-pageNum'] === curPage){
          pageStrItem = '<li data-pageNum="'+v['data-pageNum']+'" class="active"><a href="javascript:void(0);">'+v.txt+'</a></li>';
        }
        pageStr += pageStrItem;
      });

      $('.mobHot-contain .panel-footer .pagination').html('').append(pageStr);
    }

这样我们就完成了这次页签的刷新。