分页组件的使用

工作中用到了分页，在github上面用到了一款分页组件，是叫jqPaginator

参考网站是：http://jqpaginator./#a3 上面可以下载，以及介绍怎么使用；

贴出我使用的例子的代码：

html：

[html] view plain copy

1. <!-- 分页按钮 -->  
2. <div class="footer">  
3.   <ul class="pagination" id="pagination0"></ul>  
4. </div>  

js代码：

[javascript] view plain copy

1. <script>  
2. var if_firstime = true;                 //分页组件第一次加载为true，后面false  
3.   
4. /*  
5.     分页组件展示  
6.     total_pages: 总页数； 
7.     visible_pages： 让组件展示5页； 
8.     current_page: 当前页 
9. */  
10. function display_pages(total_pages, visible_pages, current_page){  
11.     if(!visible_pages){  
12.         visible_pages = 5;  
13.     }  
14.     if(!current_page){  
15.         current_page = 1;  
16.     }  
17.   
18.     $.jqPaginator('#pagination0', {  
19.         totalPages: total_pages,  
20.         visiblePages: visible_pages,  
21.         currentPage: current_page,  
22.         prev: '<li class="prev"><a href="javascript:;">上一页</a></li>',  
23.         next: '<li class="next"><a href="javascript:;">下一页</a></li>',  
24.         page: '<li class="page"><a href="javascript:;">{{page}}</a></li>',  
25.         onPageChange: function (page, type) {  
26.             // alert(type + '：' + page);  
27.             if(if_firstime){  
28.                 if_firstime = false;  
29.             }else if(!if_firstime){  
30.                 changePage(page);  
31.             }  
32.               
33.         }  
34.     });  
35. }  
36.   
37. /* 
38. 1.第一次加载的时候onPageChange就会执行； 
39. 2.分页改变会触发onPageChange,可以在这个里面写回调函数，写翻页的代码 
40. */  
41.   
42. </script>  

效果：

不清楚的，参考网站上写的比较好；另外将这个插件上传到资源共享地址，http://download.csdn.net/my/uploads/1

带首页和末页的风格，以及默认显示10页：

[javascript] view plain copy

1. $.jqPaginator('#pagination0', {  
2.         totalPages: total_pages,  
3.         visiblePages: visible_pages,  
4.         currentPage: current_page,  
5.         first: '<li class="prev"><a href="javascript:;">首页</a></li>',  
6.         prev: '<li class="prev"><a href="javascript:;">上一页</a></li>',  
7.         next: '<li class="next"><a href="javascript:;">下一页</a></li>',  
8.         last: '<li class="prev"><a href="javascript:;">末页</a></li>',  
9.         page: '<li class="page"><a href="javascript:;">{{page}}</a></li>',  
10.         onPageChange: function (page, type) {  
11.             // alert(type + '：' + page);  
12.             if(if_firstime){  
13.                 if_firstime = false;  
14.             }else if(!if_firstime){  
15.                 changePage(page, search_content);  
16.             }  
17.               
18.         }  
19.     });  

效果：

说明截图：