ajax实现分页页签

浏览数：33 / 时间：2015年06月09日

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

 1 <ul class="pagination">
 2     <li data-pagenum="0" class="active"><a href="javascript:void(0);">1</a>
 3     </li>
 4     <li data-pagenum="1"><a href="javascript:void(0);">2</a>
 5     </li>
 6     <li data-pagenum="2"><a href="javascript:void(0);">3</a>
 7     </li>
 8     <li data-pagenum="3"><a href="javascript:void(0);">4</a>
 9     </li>
10     <li data-pagenum="4"><a href="javascript:void(0);">5</a>
11     </li>
12     <li data-pagenum="5"><a href="javascript:void(0);">6</a>
13     </li>
14     <li data-pagenum="6"><a href="javascript:void(0);">7</a>
15     </li>
16     <li data-pagenum="7"><a href="javascript:void(0);">8</a>
17     </li>
18     <li data-pagenum="8"><a href="javascript:void(0);">9</a>
19     </li>
20     <li data-pagenum="1"><a href="javascript:void(0);">下一页</a>
21     </li>
22     <li data-pagenum="5559"><a href="javascript:void(0);">尾页</a>
23     </li>
24 </ul>

接下来我们专注逻辑部分

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

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

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

 1 /*分页 设置*/
 2     function setPageFoot(count, totalPage, curPage){
 3       
 4       var pageStr = ‘‘;
 5       var i_page_start = 0;
 6       var i_page_end = 9;
 7       if(totalPage < 9){
 8         i_page_end = totalPage;
 9       }else{
10 
11         if((curPage + 8) <= (totalPage-1)){
12           i_page_end = curPage + 8;
13         }else if((curPage + 7) <= (totalPage-1)){
14           i_page_end = curPage + 7;
15         }else if((curPage + 6) <= (totalPage-1)){
16           i_page_end = curPage + 6;
17         }else if((curPage + 5) <= (totalPage-1)){
18           i_page_end = curPage + 5;
19         }else if((curPage + 4) <= (totalPage-1)){
20           i_page_end = curPage + 4;
21         }else if((curPage + 3) <= (totalPage-1)){
22           i_page_end = curPage + 3;
23         }else if((curPage + 2) <= (totalPage-1)){
24           i_page_end = curPage + 2;
25         }else if((curPage + 1) <= (totalPage-1)){
26           i_page_end = curPage + 1;
27         }else{
28           i_page_end = curPage;
29         }
30         i_page_start = i_page_end-8;
31       }
32 
33       if(curPage >= 4 && curPage + 4 < totalPage - 1){
34         i_page_start -= 4;
35         i_page_end -= 3;
36       }
37 
38       var pageItems = [];
39       if(curPage > 0){
40         pageItems.push({
41           ‘txt‘: ‘首页‘,
42           ‘data-pageNum‘: 0
43         });
44         if(i_page_start > 0){
45           pageItems.push({
46             ‘txt‘: ‘上一页‘,
47             ‘data-pageNum‘: i_page_start-1
48           });
49         }
50       }
51       for(; i_page_start <= i_page_end; i_page_start ++){
52         var pageItem = {
53           ‘txt‘: i_page_start + 1 + ‘‘,
54           ‘data-pageNum‘: i_page_start
55         }
56         pageItems.push(pageItem);
57       }
58 
59       if(curPage < totalPage - 1){
60         if(curPage < totalPage-1){
61           pageItems.push({
62             ‘txt‘: ‘下一页‘,
63             ‘data-pageNum‘: curPage + 1
64           });
65         }
66         pageItems.push({
67           ‘txt‘: ‘尾页‘,
68           ‘data-pageNum‘: totalPage - 1
69         });
70       }      
71 
72       $.each(pageItems, function (i,v){
73         var pageStrItem = ‘<li data-pageNum="‘+v[‘data-pageNum‘]+‘"><a href="javascript:void(0);">‘+v.txt+‘</a></li>‘;
74         if(v[‘data-pageNum‘] === curPage){
75           pageStrItem = ‘<li data-pageNum="‘+v[‘data-pageNum‘]+‘" class="active"><a href="javascript:void(0);">‘+v.txt+‘</a></li>‘;
76         }
77         pageStr += pageStrItem;
78       });
79 
80       $(‘.mobHot-contain .panel-footer .pagination‘).html(‘‘).append(pageStr);
81     }