使用JQuery实现的分页插件分享

本文给大家总结了几种使用jQuery实现的分页插件，效果非常不错，有需要的小伙伴可以参考下。

一个简单的jQuery分页插件，兼容AMD规范和requireJS.

1. /** 
2. * jQuery分页插件 
3. * */ 
4. ;(function (factory) { 
5. if (typeof define === "function" && define.amd) { 
6. // AMD模式 
7. define([ "jquery" ], factory); 
8. } else { 
9. // 全局模式 
10. factory(jQuery); 
11. } 
12. }(function ($) { 
13.  
14. //定义MyPagePlugin的构造函数 
15. MyPagePlugin = function(ele, option) { 
16. // this.viewHtml="<nav><ul class='pagination'><li><a id='firstPageli'>«</a></li><li><a id='prevPageli'>‹</a></li><li class='active'><a>第<span id='curPageNoSpan'></span>页,共<span id='allPageCountSpan'></span>页</a></li><li><a id='nextPageli'>›</a></li><li><a id='lastPageli'>»</a></li></ul></nav>"; 
17. this.viewHtml= "<div class='pageplugin'><a class='first firstPageli'>«</a><a class='previous prevPageli'>‹</a><a class='present'>第<span class='curPageNoSpan'></span>页,共<span class='allPageCountSpan'></span>页</a><a class='next nextPageli'>›</a><a class='last lastPageli'>»</a></div>" 
18.  
19. this.$element = ele; 
20. /**参数：page:当前页,pageCount:总共页数,onPaged回调函数,回调函数会传入页数*/ 
21. this.defaults = { 
22. page:1, 
23. pageCount:1, 
24. onPaged:function(pageNo){} 
25. }; 
26. this.options = $.extend({}, this.defaults, option); 
27.  
28. } 
29. //定义MyPagePlugin的方法 
30. MyPagePlugin.prototype = { 
31. initPlugin:function(){ 
32. this.$element.empty(); 
33. this.$element.append(this.viewHtml); 
34. this.options.onPaged(this.options.page);//初始化 
35. this.$element.find(".curPageNoSpan").text(this.options.page); 
36. this.$element.find(".curPageNoSpan").data("options",this.options); 
37. this.$element.find(".allPageCountSpan").text(this.options.pageCount); 
38. this.$element.find(".firstPageli").on("click",function(e){ 
39.  
40. var curNo=$(e.currentTarget).parent("div.pageplugin").find(".curPageNoSpan").text(); 
41. curNo=parseInt(curNo); 
42. if(curNo==1){ 
43. return false; 
44. }else{ 
45.  
46. $(e.currentTarget).parent("div.pageplugin").find(".curPageNoSpan").data("options").onPaged(1); 
47. $(e.currentTarget).parent("div.pageplugin").find(".curPageNoSpan").text(1); 
48. } 
49. return false; 
50. }); 
51. this.$element.find(".prevPageli").on("click",function(e){ 
52. var curNo=$(e.currentTarget).parent("div.pageplugin").find(".curPageNoSpan").text(); 
53. curNo=parseInt(curNo); 
54. if(curNo==1){ 
55. return false; 
56. }else{ 
57. $(e.currentTarget).parent("div.pageplugin").find(".curPageNoSpan").data("options").onPaged(curNo-1); 
58. $(e.currentTarget).parent("div.pageplugin").find(".curPageNoSpan").text(curNo-1); 
59. } 
60. return false; 
61. }); 
62. this.$element.find(".nextPageli").on("click",function(e){ 
63. var curNo=$(e.currentTarget).parent("div.pageplugin").find(".curPageNoSpan").text(); 
64. curNo=parseInt(curNo); 
65. var pageCount=$(e.currentTarget).parent("div.pageplugin").find(".allPageCountSpan").text(); 
66. pageCount=parseInt(pageCount); 
67. if(curNo==pageCount){ 
68. return false; 
69. }else{ 
70. $(e.currentTarget).parent("div.pageplugin").find(".curPageNoSpan").data("options").onPaged(curNo+1); 
71. $(e.currentTarget).parent("div.pageplugin").find(".curPageNoSpan").text(curNo+1); 
72. } 
73. return false; 
74. }); 
75. this.$element.find(".lastPageli").on("click",function(e){ 
76. var curNo=$(e.currentTarget).parent("div.pageplugin").find(".curPageNoSpan").text(); 
77. curNo=parseInt(curNo); 
78. var pageCount=$(e.currentTarget).parent("div.pageplugin").find(".allPageCountSpan").text(); 
79. pageCount=parseInt(pageCount); 
80. if(curNo==pageCount){ 
81. return false; 
82. }else{ 
83. $(e.currentTarget).parent("div.pageplugin").find(".curPageNoSpan").data("options").onPaged(pageCount); 
84. $(e.currentTarget).parent("div.pageplugin").find(".curPageNoSpan").text(pageCount); 
85. } 
86. return false; 
87. }); 
88.  
89. } 
90.  
91.  
92. } 
93. $.fn.pagePlugin = function (option) { 
94. var pagePlugin=new MyPagePlugin(this,option); 
95. pagePlugin.initPlugin(); 
96. }; 
97. })); 

CSS

1. .pageplugin { 
2. display: inline-block; 
3. border: 1px solid #CDCDCD; 
4. border-radius: 3px; } 
5.  
6. .pageplugin a { 
7. cursor: pointer; 
8. display: block; 
9. float: left; 
10. width: 20px; 
11. height: 20px; 
12. outline: none; 
13. border-right: 1px solid #CDCDCD; 
14. border-left: 1px solid #CDCDCD; 
15. color: #767676; 
16. vertical-align: middle; 
17. text-align: center; 
18. text-decoration: none; 
19. font-weight: bold; 
20. font-size: 16px; 
21. font-family: Times, 'Times New Roman', Georgia, Palatino; 
22. background-color: #f7f7f7; 
23. /* ATTN: need a better font stack  
24. background-color: #f7f7f7; 
25. background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #f3f3f3), color-stop(100%, lightgrey)); 
26. background-image: -webkit-linear-gradient(#f3f3f3, lightgrey); 
27. background-image: linear-gradient(#f3f3f3, lightgrey); */} 
28. .pageplugin a:hover, .pageplugin a:focus, .pageplugin a:active { 
29. color:#0099CC; 
30. background-color: #cecece; 
31. background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #e4e4e4), color-stop(100%, #cecece)); 
32. background-image: -webkit-linear-gradient(#e4e4e4, #cecece); 
33. background-image: linear-gradient(#e4e4e4, #cecece); } 
34. .pageplugin a.disabled, .pageplugin a.disabled:hover, .pageplugin a.disabled:focus, .pageplugin a.disabled:active { 
35. background-color: #f3f3f3; 
36. background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #f3f3f3), color-stop(100%, lightgrey)); 
37. background-image: -webkit-linear-gradient(#f3f3f3, lightgrey); 
38. background-image: linear-gradient(#f3f3f3, lightgrey); 
39. color: #A8A8A8; 
40. cursor: default; } 
41.  
42. .pageplugin a:first-child { 
43. border: none; 
44. border-radius: 2px 0 0 2px; } 
45.  
46. .pageplugin a:last-child { 
47. border: none; 
48. border-radius: 0 2px 2px 0; } 
49.  
50. .pageplugin .present { 
51. float: left; 
52. margin: 0; 
53. padding: 0; 
54. width: 120px; 
55. height: 20px; 
56. outline: none; 
57. border: none; 
58. vertical-align: middle; 
59. text-align: center; } 

jquery分页插件cypager

cypager是网友分享到JquerySchool网站上的一款作品，非常实用，经过测试，插件兼容 IE8+,Chrome,Firefox 浏览器,核心文件仅 5KB。。。

调用方式

由于是 jquery插件，所以在引人 cypager.min.js 之前，要引人 jquery.min.js 本人使用的是 1.7.2 版本的，低版本的没试过。

引入css :

引人js :