`
thinkerAndThinker
  • 浏览: 284777 次
  • 性别: Icon_minigender_1
  • 来自: 上海
社区版块
存档分类
最新评论

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

 
阅读更多

最新版本代码请移步到https://github.com/pgkk/kkpager 

在线测试链接：http://pgkk.github.io/kkpager/example/pager_test.html 

分页按钮思想： 
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;background-color:#0063DC;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.     background-color:#FFF;  
  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.     background-color:#FFF;  
  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.     background-color:#FF6600;  
  40.     color:#FFF;  
  41. }  
  42.   
  43. #div_pager a:hover{  
  44.     background-color:#FFEEE5;  
  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写死了，样式也是写当行内样式，懒得提取出来了，影响不大，各位看官若要用自己再修修，呵呵 

分享到：
| svn服务器的安装使用
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

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

    本文将深入探讨“仿淘宝分页按钮效果简单美观易实用当分页JS控件”，并围绕相关标签——分页控件、js分页控件、分页按钮算法以及分页算法进行详尽的解释。 首先，我们要理解“分页控件”的概念。分页控件是网页应用...

    基于JS分页控件实现简单美观仿淘宝分页按钮效果

    使用JavaScript实现分页控件，可以让用户在网页上看到类似于淘宝网站的分页按钮效果。通过编写JS代码，可以控制分页控件的各种行为，如页码的显示、跳转、以及页码输入框的焦点变化等。本文提到的kkpager是一个具体...

    js分页控件--js封装的分页控件

    自己写的一个js分页控件.已经封装,可以直接使用. 适合各种用途的分页控制. 如果界面不够美观,只需要修改css即可.

    仿淘宝分页控件

    淘宝分页控件 如果有打开MS Visual Studio，请先关闭。然后打开“安装.exe”，注册及添加控件到工具箱， 再打开MS Visual Studio，展开“工具箱”，即可看到已添加“AuthCode”的控件，直接拖到aspx 页面。在.cs后台...

    能用漂亮分页控件及Demo源码

    分页按钮属性效果 使用自定义信息区 居中当前页索引按钮 Repeater分页 DataList分页 Url分页 使用Url重写技术 Url逆向分页 N层结构应用 使用XML文件数据源 图片浏览示例 使用AccessDataSource 使用SqlDataSource ...

    JS分页控件+CSS样式

    JS分页控件主要是通过JavaScript来动态生成分页按钮，并处理用户点击分页按钮时的事件，以实现页面内容的切换。其核心逻辑包括以下几个步骤： 1. 计算总页数：根据数据总数和每页显示的数据量计算出总的分页数。 2....

    超漂亮分页控件 自定义分页控件 灵活的分页控件

    描述中提到的"使用分页控件之前，一定要看详细说明，先执行存储过程"，暗示了这个分页控件可能依赖于后端的特定处理方式。存储过程是一种预编译的SQL代码集合，常用于数据库中的复杂逻辑操作。在分页场景中，存储...

    仿淘宝分页

    【描述】提到的"是一个仿淘宝分页的js页面，很好看的哦,里面使用jq框，你可以直接打开"，这表明这个项目是使用JavaScript（可能是jQuery库，简称jq）实现的一个分页组件。jQuery是一个广泛使用的JavaScript库，它...

    JS分页控件+CSS

    这里提到的"JS分页控件+CSS"是一个针对网页分页功能的解决方案，结合了JavaScript（JS）和层叠样式表（CSS）的技术。下面我们将深入探讨这两个关键组成部分以及它们如何协同工作。 **JS分页控件** JavaScript是一...

    C#分页控件，简单好用

    "C#分页控件，简单好用"这个标题恰好揭示了我们要讨论的核心——如何在C# WinForm应用中实现一个简单易用的分页功能。描述中的链接提供了一个具体的实例，通过访问可以获取更详细的操作步骤。 首先，理解分页控件的...

    WPF 仿百度分页控件

    **WPF 仿百度分页控件** 在Windows Presentation Foundation（WPF）中，开发人员经常需要实现数据的分页展示，以优化用户体验并提高应用性能。本篇将详细讲解如何构建一个模仿百度分页风格的控件。百度的分页控件以...

    分页控件；分页控件；分页控件

    可以参考各大电商平台的搜索结果页面，他们通常使用分页控件来展示商品，确保用户在海量商品中能快速定位。 总结来说，分页控件是提升数据展示体验的关键工具，合理的设计和实现能大大提高用户在处理大量信息时的...

    WinForm自定义分页控件

    下面是一个简单的自定义分页控件实现步骤： 1. 创建一个新的Windows Forms项目。 2. 在Form上添加必要的控件，如两个Button（上一页、下一页）、一个Label（当前页码）、一个Label（总页数）、一个TextBox（用户...

    winform 分页控件 DevExpress版

    - **自定义分页**：用户可以自由设定每页显示的记录数，并提供多种分页样式，如简单、详细和导航按钮等。 - **数据过滤与排序**：支持行内过滤和排序，使用户能快速找到所需信息。 - **数据绑定**：控件能够轻松...

    jQuery仿淘宝分页样式插件

    本项目是关于"jQuery仿淘宝分页样式插件"，旨在为网页提供美观且实用的分页功能，其核心目标是提高用户体验，尤其是在数据量大、需多次滚动浏览的情况下。 首先，我们来看这款插件的特点。它模仿了淘宝网站的分页...

    简单分页控件c#简单分页控件c#

    "简单分页控件c#"指的是在C#环境中实现的一种轻量级、易于使用的分页组件。 分页控件的基本工作原理是通过限制一次显示的数据量来避免一次性加载大量数据，从而减少服务器负担和提高页面加载速度。以下是一些关于...

    仿淘宝分页插件

    淘宝作为中国最大的电商平台，其分页设计简洁高效，用户体验良好，因此许多开发者会尝试“仿淘宝分页插件”来提升自己网站的用户体验。本篇文章将详细介绍如何使用jQuery实现一个类似的分页插件，并探讨相关的...

    也许是目前最好用简单的分页控件

    10. 客户端分页：在某些情况下，为了减轻服务器负担，可以在客户端进行分页，如使用JavaScript库如jQuery或Vue.js。但这可能增加客户端的计算负担，对性能有一定影响。 综上所述，创建一个简单而好用的分页控件涉及...

    winfrom 分页控件

    在Windows Forms（WinForms）开发中，为了处理大量数据并提高用户界面的可读性和交互性，常常会使用分页控件。标题“winfrom 分页控件”指的是在WinForms应用程序中实现分页功能的控件。这个控件允许用户以较小的...

Magicbox
Global site tag (gtag.js) - Google Analytics