仿淘宝分页按钮效果简单美观易使用的JS分页控件

分页按钮思想： 

1、少于9页，全部显示 

2、大于9页，1、2页显示，中间页码当前页为中心，前后各留两个页码 

附件中有完整例子的压缩包下载。已更新到最新版本 

先看效果图： 

01输入框焦点效果 



02效果 





模仿淘宝的分页按钮效果控件kkpager  JS代码：

1. var kkpager = {
2. //divID
3. pagerid : 'div_pager',
4. //当前页码
5. pno : 1,
6. //总页码
7. total : 1,
8. //总数据条数
9. totalRecords : 0,
10. //是否显示总页数
11. isShowTotalPage : true,
12. //是否显示总记录数
13. isShowTotalRecords : true,
14. //是否显示页码跳转输入框
15. isGoPage : true,
16. //链接前部
17. hrefFormer : '',
18. //链接尾部
19. hrefLatter : '',
20. /****链接算法****/
21. getLink : function(n){
22. //这里的算法适用于比如：
23. //hrefFormer=http://www.xx.com/news/20131212
24. //hrefLatter=.html
25. //那么首页（第1页）就是http://www.xx.com/news/20131212.html
26. //第2页就是http://www.xx.com/news/20131212_2.html
27. //第n页就是http://www.xx.com/news/20131212_n.html
28. if(n == 1){
29. return this.hrefFormer + this.hrefLatter;
30. }else{
31. return this.hrefFormer + '_' + n + this.hrefLatter;
32. }
33. },
34. //跳转框得到输入焦点时
35. focus_gopage : function (){
36. var btnGo = $('#btn_go');
37. $('#btn_go_input').attr('hideFocus',true);
38. btnGo.show();
39. btnGo.css('left','0px');
40. $('#go_page_wrap').css('border-color','#6694E3');
41. btnGo.animate({left: '+=44'}, 50,function(){
42. //$('#go_page_wrap').css('width','88px');
43. });
44. },
45. //跳转框失去输入焦点时
46. blur_gopage : function(){
47. setTimeout(function(){
48. var btnGo = $('#btn_go');
49. //$('#go_page_wrap').css('width','44px');
50. btnGo.animate({
51. left: '-=44'
52. }, 100, function() {
53. $('#btn_go').css('left','0px');
54. $('#btn_go').hide();
55. $('#go_page_wrap').css('border-color','#DFDFDF');
56. });
57. },400);
58. },
59. //跳转框页面跳转
60. gopage : function(){
61. var str_page = $("#btn_go_input").val();
62. if(isNaN(str_page)){
63. $("#btn_go_input").val(this.next);
64. return;
65. }
66. var n = parseInt(str_page);
67. if(n < 1 || n >this.total){
68. $("#btn_go_input").val(this.next);
69. return;
70. }
71. //这里可以按需改window.open
72. window.location = this.getLink(n);
73. },
74. //分页按钮控件初始化
75. init : function(config){
76. //赋值
77. this.pno = isNaN(config.pno) ? 1 : parseInt(config.pno);
78. this.total = isNaN(config.total) ? 1 : parseInt(config.total);
79. this.totalRecords = isNaN(config.totalRecords) ? 0 : parseInt(config.totalRecords);
80. if(config.pagerid){this.pagerid = config.pagerid;}
81. if(config.isShowTotalPage != undefined){this.isShowTotalPage=config.isShowTotalPage;}
82. if(config.isShowTotalRecords != undefined){this.isShowTotalRecords=config.isShowTotalRecords;}
83. if(config.isGoPage != undefined){this.isGoPage=config.isGoPage;}
84. this.hrefFormer = config.hrefFormer || '';
85. this.hrefLatter = config.hrefLatter || '';
86. if(config.getLink && typeof(config.getLink) == 'function'){this.getLink = config.getLink;}
87. //验证
88. if(this.pno < 1) this.pno = 1;
89. this.total = (this.total <= 1) ? 1: this.total;
90. if(this.pno > this.total) this.pno = this.total;
91. this.prv = (this.pno<=2) ? 1 : (this.pno-1);
92. this.next = (this.pno >= this.total-1) ? this.total : (this.pno + 1);
93. this.hasPrv = (this.pno > 1);
94. this.hasNext = (this.pno < this.total);
95. this.inited = true;
96. },
97. //生成分页控件Html
98. generPageHtml : function(){
99. if(!this.inited){
100. return;
101. }
102. var str_prv='',str_next='';
103. if(this.hasPrv){
104. str_prv = '<a href="'+this.getLink(this.prv)+'" title="上一页">上一页</a>';
105. }else{
106. str_prv = '<span class="disabled">上一页</span>';
107. }
108. if(this.hasNext){
109. str_next = '<a href="'+this.getLink(this.next)+'" title="下一页">下一页</a>';
110. }else{
111. str_next = '<span class="disabled">下一页</span>';
112. }
113. var str = '';
114. var dot = '<span>...</span>';
115. var total_info='';
116. if(this.isShowTotalPage || this.isShowTotalRecords){
117. total_info = '<span class="normalsize">共';
118. if(this.isShowTotalPage){
119. total_info += this.total+'页';
120. if(this.isShowTotalRecords){
121. total_info += '&nbsp;/&nbsp;';
122. }
123. }
124. if(this.isShowTotalRecords){
125. total_info += this.totalRecords+'条数据';
126. }
127. total_info += '</span>';
128. }
129. var gopage_info = '';
130. if(this.isGoPage){
131. gopage_info = '&nbsp;转到<span id="go_page_wrap" style="display:inline-block;width:44px;height:18px;border:1px solid #DFDFDF;margin:0px 1px;padding:0px;position:relative;left:0px;top:5px;">'+
132. '<input type="button" id="btn_go" onclick="kkpager.gopage();" style="width:44px;height:20px;line-height:20px;padding:0px;font-family:arial,宋体,sans-serif;text-align:center;border:0px;color:#FFF;position:absolute;left:0px;top:-1px;display:none;" value="确定" />'+
133. '<input type="text" id="btn_go_input" onfocus="kkpager.focus_gopage()" onkeypress="if(event.keyCode<48 || event.keyCode>57)return false;" onblur="kkpager.blur_gopage()" style="width:42px;height:16px;text-align:center;border:0px;position:absolute;left:0px;top:0px;outline:none;" value="'+this.next+'" /></span>页';
134. }
135. //分页处理
136. if(this.total <= 8){
137. for(var i=1;i<=this.total;i++){
138. if(this.pno == i){
139. str += '<span class="curr">'+i+'</span>';
140. }else{
141. str += '<a href="'+this.getLink(i)+'" title="第'+i+'页">'+i+'</a>';
142. }
143. }
144. }else{
145. if(this.pno <= 5){
146. for(var i=1;i<=7;i++){
147. if(this.pno == i){
148. str += '<span class="curr">'+i+'</span>';
149. }else{
150. str += '<a href="'+this.getLink(i)+'" title="第'+i+'页">'+i+'</a>';
151. }
152. }
153. str += dot;
154. }else{
155. str += '<a href="'+this.getLink(1)+'" title="第1页">1</a>';
156. str += '<a href="'+this.getLink(2)+'" title="第2页">2</a>';
157. str += dot;
158. var begin = this.pno - 2;
159. var end = this.pno + 2;
160. if(end > this.total){
161. end = this.total;
162. begin = end - 4;
163. if(this.pno - begin < 2){
164. begin = begin-1;
165. }
166. }else if(end + 1 == this.total){
167. end = this.total;
168. }
169. for(var i=begin;i<=end;i++){
170. if(this.pno == i){
171. str += '<span class="curr">'+i+'</span>';
172. }else{
173. str += '<a href="'+this.getLink(i)+'" title="第'+i+'页">'+i+'</a>';
174. }
175. }
176. if(end != this.total){
177. str += dot;
178. }
179. }
180. }
181. str = "&nbsp;"+str_prv + str + str_next  + total_info + gopage_info;
182. $("#"+this.pagerid).html(str);
183. }
184. };

html调用代码：

1. <div id="div_pager"></div>
2. <script type="text/javascript">
3. //生成分页控件
4. kkpager.init({
5. pno : '${p.pageNo}',
6. //总页码
7. total : '${p.totalPage}',
8. //总数据条数
9. totalRecords : '${p.totalCount}',
10. //链接前部
11. hrefFormer : '${hrefFormer}',
12. //链接尾部
13. hrefLatter : '${hrefLatter}'
14. });
15. kkpager.generPageHtml();
16. </script>

以上是示例中是必传参数，页码、总页数、总记录数这些是要根据获取服务端pager对象当相关值，还有可选的参数：pagerid、isShowTotalPage、isShowTotalRecords、isGoPage、getLink 



注意链接算法哟，以下是默认链接算法（这个getLink方法也可以作为config参数）：

1. /****默认链接算法****/
2. getLink : function(n){
3. //这里的算法适用于比如：
4. //hrefFormer=http://www.xx.com/news/20131212
5. //hrefLatter=.html
6. //那么首页（第1页）就是http://www.xx.com/news/20131212.html
7. //第2页就是http://www.xx.com/news/20131212_2.html
8. //第n页就是http://www.xx.com/news/20131212_n.html
9. if(n == 1){
10. return this.hrefFormer + this.hrefLatter;
11. }else{
12. return this.hrefFormer + '_' + n + this.hrefLatter;
13. }
14. }

CSS代码：

1. #div_pager{
2. clear:both;
3. height:30px;
4. line-height:30px;
5. margin-top:20px;
6. color:#999999;
7. }
8. #div_pager a{
9. padding:4px 8px;
10. margin:10px 3px;
11. font-size:12px;
12. border:1px solid #DFDFDF;
13. color:#9d9d9d;
14. text-decoration:none;
15. }
16. #div_pager span{
17. padding:4px 8px;
18. margin:10px 3px;
19. font-size:14px;
20. }
21. #div_pager span.disabled{
22. padding:4px 8px;
23. margin:10px 3px;
24. font-size:12px;
25. border:1px solid #DFDFDF;
26. color:#DFDFDF;
27. }
28. #div_pager span.curr{
29. padding:4px 8px;
30. margin:10px 3px;
31. font-size:12px;
32. border:1px solid #FF6600;
33. color:#FFF;
34. }
35. #div_pager a:hover{
36. border:1px solid #FF6600;
37. }
38. #div_pager span.normalsize{
39. font-size:12px;
40. }

效果图： 

1、没有数据或只有一页数据时效果 







2、有多页时当效果 







3、第5页效果 







4、第6页效果（分页效果2） 







5、第17页效果（接近尾页效果） 







6、尾页效果 







7、输入框焦点效果 







最后注意，若要使用，使用时请修改分页获取链接当算法，不然不适用哟 

里面输入框我把ID写死了，样式也是写当行内样式，懒得提取出来了，影响不大，各位看官若要用自己再修修，呵呵