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

Posted 2020-08-22 飘渺的悠远

分页按钮思想： 
1、少于9页，全部显示 
2、大于9页，1、2页显示，中间页码当前页为中心，前后各留两个页码 
附件中有完整例子的压缩包下载。已更新到最新版本 
先看效果图： 
01输入框焦点效果 

02效果 


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

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.         //跳转框失去输入焦点时  
47.         blur_gopage : function(){  
48.             setTimeout(function(){  
49.                 var btnGo = $(‘#btn_go‘);  
50.                 //$(‘#go_page_wrap‘).css(‘width‘,‘44px‘);  
51.                 btnGo.animate({  
52.                     left: ‘-=44‘  
53.                   }, 100, function() {  
54.                       $(‘#btn_go‘).css(‘left‘,‘0px‘);  
55.                       $(‘#btn_go‘).hide();  
56.                       $(‘#go_page_wrap‘).css(‘border-color‘,‘#DFDFDF‘);  
57.                   });  
58.             },400);  
59.         },  
60.         //跳转框页面跳转  
61.         gopage : function(){  
62.             var str_page = $("#btn_go_input").val();  
63.             if(isNaN(str_page)){  
64.                 $("#btn_go_input").val(this.next);  
65.                 return;  
66.             }  
67.             var n = parseInt(str_page);  
68.             if(n < 1 || n >this.total){  
69.                 $("#btn_go_input").val(this.next);  
70.                 return;  
71.             }  
72.             //这里可以按需改window.open  
73.             window.location = this.getLink(n);  
74.         },  
75.         //分页按钮控件初始化  
76.         init : function(config){  
77.             //赋值  
78.             this.pno = isNaN(config.pno) ? 1 : parseInt(config.pno);  
79.             this.total = isNaN(config.total) ? 1 : parseInt(config.total);  
80.             this.totalRecords = isNaN(config.totalRecords) ? 0 : parseInt(config.totalRecords);  
81.             if(config.pagerid){this.pagerid = config.pagerid;}  
82.             if(config.isShowTotalPage != undefined){this.isShowTotalPage=config.isShowTotalPage;}  
83.             if(config.isShowTotalRecords != undefined){this.isShowTotalRecords=config.isShowTotalRecords;}  
84.             if(config.isGoPage != undefined){this.isGoPage=config.isGoPage;}  
85.             this.hrefFormer = config.hrefFormer || ‘‘;  
86.             this.hrefLatter = config.hrefLatter || ‘‘;  
87.             if(config.getLink && typeof(config.getLink) == ‘function‘){this.getLink = config.getLink;}  
88.             //验证  
89.             if(this.pno < 1) this.pno = 1;  
90.             this.total = (this.total <= 1) ? 1: this.total;  
91.             if(this.pno > this.total) this.pno = this.total;  
92.             this.prv = (this.pno<=2) ? 1 : (this.pno-1);  
93.             this.next = (this.pno >= this.total-1) ? this.total : (this.pno + 1);  
94.             this.hasPrv = (this.pno > 1);  
95.             this.hasNext = (this.pno < this.total);  
96.               
97.             this.inited = true;  
98.         },  
99.         //生成分页控件Html  
100.         generPageHtml : function(){  
101.             if(!this.inited){  
102.                 return;  
103.             }  
104.               
105.             var str_prv=‘‘,str_next=‘‘;  
106.             if(this.hasPrv){  
107.                 str_prv = ‘<a href="‘+this.getLink(this.prv)+‘" title="上一页">上一页</a>‘;  
108.             }else{  
109.                 str_prv = ‘<span class="disabled">上一页</span>‘;  
110.             }  
111.               
112.             if(this.hasNext){  
113.                 str_next = ‘<a href="‘+this.getLink(this.next)+‘" title="下一页">下一页</a>‘;  
114.             }else{  
115.                 str_next = ‘<span class="disabled">下一页</span>‘;  
116.             }  
117.               
118.               
119.             var str = ‘‘;  
120.             var dot = ‘<span>...</span>‘;  
121.             var total_info=‘‘;  
122.             if(this.isShowTotalPage || this.isShowTotalRecords){  
123.                 total_info = ‘<span class="normalsize">共‘;  
124.                 if(this.isShowTotalPage){  
125.                     total_info += this.total+‘页‘;  
126.                     if(this.isShowTotalRecords){  
127.                         total_info += ‘&nbsp;/&nbsp;‘;  
128.                     }  
129.                 }  
130.                 if(this.isShowTotalRecords){  
131.                     total_info += this.totalRecords+‘条数据‘;  
132.                 }  
133.                   
134.                 total_info += ‘</span>‘;  
135.             }  
136.               
137.             var gopage_info = ‘‘;  
138.             if(this.isGoPage){  
139.                 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;">‘+  
140.                     ‘<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="确定" />‘+  
141.                     ‘<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>页‘;  
142.             }  
143.               
144.             //分页处理  
145.             if(this.total <= 8){  
146.                 for(var i=1;i<=this.total;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.             }else{  
154.                 if(this.pno <= 5){  
155.                     for(var i=1;i<=7;i++){  
156.                         if(this.pno == i){  
157.                             str += ‘<span class="curr">‘+i+‘</span>‘;  
158.                         }else{  
159.                             str += ‘<a href="‘+this.getLink(i)+‘" title="第‘+i+‘页">‘+i+‘</a>‘;  
160.                         }  
161.                     }  
162.                     str += dot;  
163.                 }else{  
164.                     str += ‘<a href="‘+this.getLink(1)+‘" title="第1页">1</a>‘;  
165.                     str += ‘<a href="‘+this.getLink(2)+‘" title="第2页">2</a>‘;  
166.                     str += dot;  
167.                       
168.                     var begin = this.pno - 2;  
169.                     var end = this.pno + 2;  
170.                     if(end > this.total){  
171.                         end = this.total;  
172.                         begin = end - 4;  
173.                         if(this.pno - begin < 2){  
174.                             begin = begin-1;  
175.                         }  
176.                     }else if(end + 1 == this.total){  
177.                         end = this.total;  
178.                     }  
179.                     for(var i=begin;i<=end;i++){  
180.                         if(this.pno == i){  
181.                             str += ‘<span class="curr">‘+i+‘</span>‘;  
182.                         }else{  
183.                             str += ‘<a href="‘+this.getLink(i)+‘" title="第‘+i+‘页">‘+i+‘</a>‘;  
184.                         }  
185.                     }  
186.                     if(end != this.total){  
187.                         str += dot;  
188.                     }  
189.                 }  
190.             }  
191.               
192.             str = "&nbsp;"+str_prv + str + str_next  + total_info + gopage_info;  
193.             $("#"+this.pagerid).html(str);  
194.         }  
195. };  

html调用代码： 

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参数）： 

Js代码  

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代码： 

Css代码  

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

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



2、有多页时当效果 



3、第5页效果 



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



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



6、尾页效果 



7、输入框焦点效果 



最后注意，若要使用，使用时请修改分页获取链接当算法，不然不适用哟 
里面输入框我把ID写死了，样式也是写当行内样式，懒得提取出来了，影响不大，各位看官若要用自己再修修，呵呵

以上是关于仿淘宝分页按钮效果简单美观易使用的JS分页控件的主要内容，如果未能解决你的问题，请参考以下文章

thinkphp简洁美观靠谱的分页类

thinkphp简洁美观靠谱的分页类

使用amaze ui的分页样式封装一个通用的JS分页控件

php实现仿百度分页

laypage分页控件使用方法

js实现分页