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);
     }

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