jquery【插件】 pagination使用

1，下载3个文件 
分别为：jquery-1.7.1.js、jquery.pagination.js、pagination.css 
//详见附件 


2，准备好服务器端返回结果 
主要代码如下： 
Php代码  

1. $members = array(array().......);  //详见附件  
2. $total          = count($members);  
3. $pageIndex      = $_POST['pageIndex'];  
4. $items_per_page = $_POST['items_per_page'];  
5.   
6. $result = array();  
7. $start = $pageIndex * $items_per_page;  
8. $end   = ($pageIndex+1) * $items_per_page;  
9. if($end > $total){$end = $total;}  
10. for($i = $start; $i < $end; $i++){  
11.     $result[] = $members[$i];  
12. }  
13.   
14. print json_encode(array('total'=>$total,'result'=>$result));  

3，前端js代码（核心） 
Js代码  

1. var items_per_page = 3;  
2. var page_index = 0;  
3.   
4. function getDataList(index){  
5.     var pageIndex = index;  
6.     $.ajax({  
7.         type: "POST",  
8.         url: "members.php",  
9.         data: "pageIndex="+pageIndex+'&items_per_page='+items_per_page,  
10.         dataType: 'json',  
11.         contentType: "application/x-www-form-urlencoded",  
12.         success: function(msg){  
13.             var total = msg.total;  
14.             var html = '<table><tr><th>姓名</th><th>工作时间</th><th>籍贯</th><th>职务</th><th>生卒年</th><th>操作</th></tr>';  
15.             $.each(msg.result,function(i,n){      
16.                 html += '<tr><td>'+n[0]+'</td><td>'+n[1]+'</td><td>'+n[2]+'</td><td>'+n[3]+'</td><td>'+n[4]+'</td>'  
17.                 html += '<td><a href=#>删除</a></td></tr>';  
18.             });  
19.             html += '</table>';  
20.             $('#Searchresult').html(html);  
21.               
22.             //分页-只初始化一次  
23.             if($("#Pagination").html().length == ''){  
24.                 $("#Pagination").pagination(total, {  
25.                     'items_per_page'      : items_per_page,  
26.                     'num_display_entries' : 10,  
27.                     'num_edge_entries'    : 2,  
28.                     'prev_text'           : "上一页",  
29.                     'next_text'           : "下一页",  
30.                     'callback'            : pageselectCallback  
31.                 });  
32.             }  
33.         }  
34.     });  
35. }  
36.   
37.   
38. function pageselectCallback(page_index, jq){  
39.     getDataList(page_index);  
40. }  
41.   
42. $(document).ready(function(){  
43.     getDataList(page_index);  
44. });  

4，前端html 
Html代码  

1. <dl id="Searchresult">  
2.     <dt>Search Results will be inserted here ...</dt>  
3. </dl>  
4. <br style="clear:both;" />  
5. <div id="Pagination" class="pagination"></div>  
6. <br style="clear:both;" />  

批注： 
（1）jquery.js和jquery.pagination.js插件的加载有先后顺序，不能颠倒。特别是在复杂的页面中。 
（2）jquery.pagination.js实现可以有很多种。不同的分页插件，使用时可能会有差别，所以最好有足够的js功底，读懂那些插件是如何实现，以及如何引用。 
（3）pagination.css是样式，可以独立出来。也即可以使用很多种不同的样式修饰，不必是给出的那一个。