关于jQuery分页

 之前问过好几个做Java后台的朋友，他们一般处理分页是后台处理好分页返回数据给前台的，都没用过jQuery分页。

      然而由于需求问题。需要把数据存放在application中返回到前台，之后再进行分页。所以上网搜索了一下jQuery分页代码，不能满足需求。所以自己弄了一个，和大家分享一下。
    
       效果图是这样的：

      下面是Javascrip代码和对应的部分html代码

[javascript] view plain copy

1. <script type= "text/javascript" >  
2.     $ (document). ready(function(){  
3.         $ (".items .wrap:gt(1)").hide ();//初始化，前面4条数据显示，其他的数据隐藏。  
4.         var total_q= $(".items .wrap" ).index()+ 1;//总数据  
5.         var current_page= 2;//每页显示的数据  
6.         var current_num= 1;//当前页数  
7.         var total_page= Math.round(total_q/current_page) ;//总页数  
8.         var next= $(".next" );//下一页  
9.         var prev= $(".prev" );//上一页  
10.         $ (".total"). text(total_page); //显示总页数  
11.         $ (".currentPage").text (current_num);//当前的页数  
12.         for( var i=1 ;i<=total_page; i++){  
13.             if(i== 1){  
14.                 $( ".next").before (" <a href='javascript:;' class='otherPage currentPage'>"+i+ "</a>");  
15.             } else{  
16.             $ (".next"). before(" <a href='javascript:;' class='otherPage'>"+i+ "</a>");  
17.             }  
18.         }  
19.         //点击数字页  
20.         $ (".otherPage").click( function(){  
21.             current_num=$( this).text ();//当前的页数  
22.                 $( ".currentPage" ).removeClass( "currentPage" )  
23.                 $( this).addClass ("currentPage"); //点击下一页的时候就取消样式，下一个添加样式  
24.                 $. each($ ('.items .wrap') ,function(index ,item){  
25.                     var start = current_page* (current_num- 1); //起始范围  
26.                     var end = current_page * (current_num) ;//结束范围  
27.                     if(index >= start && index < end){ //如果索引值是在start和end之间的元素就显示，否则就隐  
28.                         $(this). show();  
29.                     }else {  
30.                         $(this). hide();  
31.                     }  
32.                 });  
33.         }) ;  
34.   
35.         //下一页  
36.         $ (".next").click( function(){  
37.             current_num=$( ".currentPage" ).text() ;//当前的页数  
38.             if(current_num==total_page){  
39.                 return false; //如果大于总页数就禁用下一页  
40.             }  
41.             else{  
42.                 $(".currentPage" ).removeClass( "currentPage" ).next(). addClass("currentPage" );//点击下一页的时候就取消样式，下一个添加样式  
43.                 $. each($ ('.items .wrap') ,function(index ,item){  
44.                     var start = current_page* (current_num) ;//起始范围  
45.                     var end = current_page * (current_num* 1+1 );//结束范围  
46.                     if(index >= start && index < end){ //如果索引值是在start和end之间的元素就显示，否则就隐  
47.                         $(this). show();  
48.                     }else {  
49.                         $(this). hide();  
50.                     }  
51.                 });  
52.             }  
53.         });  
54.         //上一页方法  
55.         $ (".prev").click( function(){  
56.             current_num=$( ".currentPage" ).text() ;//当前的页数  
57.             if(current_num== 1){  
58.                 return false;  
59.             } else{  
60.                 $(".currentPage" ).removeClass( "currentPage" ).prev(). addClass("currentPage" );  
61.                 $. each($ ('.items .wrap') ,function(index ,item){  
62.                     var start = current_page* (current_num- 2); //起始范围  
63.                     var end = current_page * (current_num- 1); //结束范围  
64.                     if(index >= start && index < end){ //如果索引值是在start和end之间的元素就显示，否则就隐藏  
65.                         $(this). show();  
66.                     }else {  
67.                         $(this). hide();  
68.                     }  
69.                 });  
70.             }  
71.   
72.         })  
73.     })  
74. </script>  

[html] view plain copy

1. <div class= "items">   
2.         <div class= "wrap">  
3.             <div class="item-title" ><!--编写需要分页的内容--></div>  
4.         </div>  
5.     </div>  
6.   
7.   
8.   
9. <div class= "pageIndex" >  
10. <!--   分页导航   currentPage:当前页 -->  
11.         <div class="nav-btn">  
12.             <a href="#" class="prev" > 上一页 </a>  
13.             <a href="#" class="next"> 下一页 </a>  
14.         </div>  
15. </div>