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

分页按钮思想： 
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;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="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="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写死了，样式也是写当行内样式，懒得提取出来了，影响不大，各位看官若要用自己再修修，呵呵

【推广】 免费学中医，健康全家人
原文地址：https://www.cnblogs.com/ZDPPU/p/6165307.html