• 仿淘宝分页按钮效果简单美观易使用的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写死了，样式也是写当行内样式，懒得提取出来了，影响不大，各位看官若要用自己再修修，呵呵

  • 相关阅读:
    Java GUI图形界面开发工具
    python操作MySQL数据库
    国外五大股票交易系统及其源码
    五个抄底摸高的交易系统和源代码
    海龟交易系统源码
    模式识别话题
    几种常见模式识别算法整理和总结
    比较好的开源人脸识别软件
    利用开源程序（ImageMagick+tesseract-ocr）实现图像验证码识别
    JSONObject与JSONArray的使用
  • 原文地址：https://www.cnblogs.com/ZDPPU/p/6165307.html
Copyright © 2020-2023  润新知