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

2023-07-21 17:42:04

分页按钮思想： 

1、少于9页，全部显示 

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

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

先看效果图： 

01输入框焦点效果 

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

02效果 

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



模仿淘宝的分页按钮效果控件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、没有数据或只有一页数据时效果 



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



2、有多页时当效果 



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



3、第5页效果 



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



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



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



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



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



6、尾页效果 



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



7、输入框焦点效果 



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



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

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

上一篇：Linux内核配置编译及Makefile简单分析


下一篇：SpringMVC源码情操陶冶-AnnotationDrivenBeanDefinitionParser注解解析器