用jquery实现分页效果

 

1. <script type="text/javascript" src="jquery.js"></script>
2. <style type="text/css">
3.         li{
4.                 cursor:pointer
5.         }
6. </style>
7. <script type="text/javascript">
8. $( function(){
9.         var currentPage = 1, pageSize = 10;
10.         var recordCount = $( 'tbody>tr', $( 'table' ) ).length;
11.         var pageCount = Math.ceil( recordCount / pageSize );
12.        
13.         function showPage( $page ){
14.                 $( 'tbody', $( 'table' ) ).find( 'tr' ).show()
15.                                                                 .filter( ':gt('+ ( $page * pageSize - 1 ) +')' ).hide().end()
16.                                                                 .filter( ':lt('+ ( ( $page - 1 ) * pageSize ) +')' ).hide().end();
17.                 $( '#msg' ).html( '共'+recordCount+'条记录, 当前第'+$page+'/'+pageCount+'页, 每页'+pageSize+'条记录' );
18.         }
19.         showPage( currentPage );
20.         $( 'ul>li', $( '#button' ) ).each( function(){
21.                 var $current = $( this );
22.                 switch( $current.parent().children().index( $current ) ){
23.                         case 0:
24.                                         $current.bind( 'click', function(){
25.                                                 currentPage = 1;
26.                                                 showPage( currentPage );
27.                                         } );
28.                                 break;
29.                         case 1:
30.                                         $current.bind( 'click', function(){
31.                                                 currentPage = currentPage > 1 ? ( currentPage - 1 ) : currentPage ;
32.                                                 showPage( currentPage );
33.                                         } );
34.                                 break;
35.                         case 2:
36.                                         $current.bind( 'click', function(){
37.                                                 currentPage = currentPage < pageCount ? ( currentPage + 1 ) : currentPage ;
38.                                                 showPage( currentPage );
39.                                         } );
40.                                 break;
41.                         case 3:
42.                                         $current.bind( 'click', function(){
43.                                                 currentPage = pageCount;
44.                                                 showPage( currentPage );
45.                                         } );
46.                                 break;
47.                 }
48.         } );
49.        
50.         $( 'span :input:button', $( '#button' ) ).unbind( 'click' ).bind( 'click', function(){
51.                 var num = parseInt( $( 'span :input:text', $( '#button' ) ).val() );
52.                 if( isNaN( num ) || num < 1 ){
53.                         num = 1;
54.                 }else if( num > pageCount ){
55.                         num = pageCount;
56.                 }
57.                 showPage( num );
58.         } );
59.         //alert( pageCount );
60. } );
61. </script>
62. <meta http-equiv="content-type" content="text/html; charset=utf-8" />
63. <table width="200" border="1">
64.         <thead>
65.         <tr>
66.             <td>数据 1</td>
67.             <td>数据 2</td>
68.             <td>数据 3</td>
69.         </tr>
70.     </thead>
71.     <tbody>
72.         <tr>
73.             <td>9</td>
74.             <td>2</td>
75.             <td>3</td>
76.         </tr>
77.         <tr>
78.             <td>4</td>
79.             <td>5</td>
80.             <td>1</td>
81.         </tr>
82.         <tr>
83.             <td>7</td>
84.             <td>8</td>
85.             <td>9</td>
86.         </tr>
87.         <tr>
88.             <td>3</td>
89.             <td>6</td>
90.             <td>2</td>
91.         </tr>
92.         <tr>
93.             <td>6</td>
94.             <td>0</td>
95.             <td>3</td>
96.         </tr>
97.         <tr>
98.             <td>4</td>
99.             <td>5</td>
100.             <td>1</td>
101.         </tr>
102.         <tr>
103.             <td>7</td>
104.             <td>8</td>
105.             <td>9</td>
106.         </tr>
107.         <tr>
108.             <td>3</td>
109.             <td>6</td>
110.             <td>2</td>
111.         </tr>
112.         <tr>
113.             <td>6</td>
114.             <td>0</td>
115.             <td>3</td>
116.         </tr>
117.         <tr>
118.             <td>9</td>
119.             <td>2</td>
120.             <td>3</td>
121.         </tr>
122.         <tr>
123.             <td>4</td>
124.             <td>5</td>
125.             <td>1</td>
126.         </tr>
127.         <tr>
128.             <td>7</td>
129.             <td>8</td>
130.             <td>9</td>
131.         </tr>
132.         <tr>
133.             <td>3</td>
134.             <td>6</td>
135.             <td>2</td>
136.         </tr>
137.         <tr>
138.             <td>6</td>
139.             <td>0</td>
140.             <td>3</td>
141.         </tr>
142.         <tr>
143.             <td>4</td>
144.             <td>5</td>
145.             <td>1</td>
146.         </tr>
147.         <tr>
148.             <td>7</td>
149.             <td>8</td>
150.             <td>9</td>
151.         </tr>
152.         <tr>
153.             <td>3</td>
154.             <td>6</td>
155.             <td>2</td>
156.         </tr>
157.         <tr>
158.             <td>6</td>
159.             <td>0</td>
160.             <td>3</td>
161.         </tr>
162.   </tbody>
163. </table>
164. <div id="msg"></div>
165. <div id="button">
166.         <ul>
167.             <li>首页</li>
168.         <li>上一页</li>
169.         <li>下一页</li>
170.         <li>末页</li>
171.     </ul>
172.     <span>
173.             <input type="text" />
174.         <input type="button" value="跳转" />
175.     </span>
176. </div>