分页按钮思想:
1、少于9页,全部显示
2、大于9页,1、2页显示,中间页码当前页为中心,前后各留两个页码
附件中有完整例子的压缩包下载。
先看效果图:
01输入框焦点效果
02效果
模仿淘宝的分页按钮效果控件kkpager JS代码:
var kkpager = { //divID pagerid : 'div_pager', //当前页码 pno : 1, //总页码 total : 1, //总数据条数 totalRecords : 0, //是否显示总页数 isShowTotalPage : true, //是否显示总记录数 isShowTotalRecords : true, //是否显示页码跳转输入框 isGoPage : true, //链接前部 hrefFormer : '', //链接尾部 hrefLatter : '', /****链接算法****/ getLink : function(n){ //这里的算法适用于比如: //hrefFormer=http://www.xx.com/news/20131212 //hrefLatter=.html //那么首页(第1页)就是http://www.xx.com/news/20131212.html //第2页就是http://www.xx.com/news/20131212_2.html //第n页就是http://www.xx.com/news/20131212_n.html if(n == 1){ return this.hrefFormer + this.hrefLatter; }else{ return this.hrefFormer + '_' + n + this.hrefLatter; } }, //跳转框得到输入焦点时 focus_gopage : function (){ var btnGo = $('#btn_go'); $('#btn_go_input').attr('hideFocus',true); btnGo.show(); btnGo.css('left','0px'); $('#go_page_wrap').css('border-color','#6694E3'); btnGo.animate({left: '+=44'}, 50,function(){ //$('#go_page_wrap').css('width','88px'); }); }, //跳转框失去输入焦点时 blur_gopage : function(){ setTimeout(function(){ var btnGo = $('#btn_go'); //$('#go_page_wrap').css('width','44px'); btnGo.animate({ left: '-=44' }, 100, function() { $('#btn_go').css('left','0px'); $('#btn_go').hide(); $('#go_page_wrap').css('border-color','#DFDFDF'); }); },400); }, //跳转框页面跳转 gopage : function(){ var str_page = $("#btn_go_input").val(); if(isNaN(str_page)){ $("#btn_go_input").val(this.next); return; } var n = parseInt(str_page); if(n < 1 || n >this.total){ $("#btn_go_input").val(this.next); return; } //这里可以按需改window.open window.location = this.getLink(n); }, //分页按钮控件初始化 init : function(config){ //赋值 this.pno = isNaN(config.pno) ? 1 : parseInt(config.pno); this.total = isNaN(config.total) ? 1 : parseInt(config.total); this.totalRecords = isNaN(config.totalRecords) ? 0 : parseInt(config.totalRecords); if(config.pagerid){this.pagerid = pagerid;} if(config.isShowTotalPage != undefined){this.isShowTotalPage=config.isShowTotalPage;} if(config.isShowTotalRecords != undefined){this.isShowTotalRecords=config.isShowTotalRecords;} if(config.isGoPage != undefined){this.isGoPage=config.isGoPage;} this.hrefFormer = config.hrefFormer || ''; this.hrefLatter = config.hrefLatter || ''; if(config.getLink && typeof(config.getLink) == 'function'){this.getLink = config.getLink;} //验证 if(this.pno < 1) this.pno = 1; this.total = (this.total <= 1) ? 1: this.total; if(this.pno > this.total) this.pno = this.total; this.prv = (this.pno<=2) ? 1 : (this.pno-1); this.next = (this.pno >= this.total-1) ? this.total : (this.pno + 1); this.hasPrv = (this.pno > 1); this.hasNext = (this.pno < this.total); this.inited = true; }, //生成分页控件Html generPageHtml : function(){ if(!this.inited){ return; } var str_prv='',str_next=''; if(this.hasPrv){ str_prv = '<a href="'+this.getLink(this.prv)+'" title="上一页">上一页</a>'; }else{ str_prv = '<span class="disabled">上一页</span>'; } if(this.hasNext){ str_next = '<a href="'+this.getLink(this.next)+'" title="下一页">下一页</a>'; }else{ str_next = '<span class="disabled">下一页</span>'; } var str = ''; var dot = '<span>...</span>'; var total_info=''; if(this.isShowTotalPage || this.isShowTotalRecords){ total_info = '<span class="normalsize">共'; if(this.isShowTotalPage){ total_info += this.total+'页'; if(this.isShowTotalRecords){ total_info += ' / '; } } if(this.isShowTotalRecords){ total_info += this.totalRecords+'条数据'; } total_info += '</span>'; } var gopage_info = ''; if(this.isGoPage){ gopage_info = ' 转到<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;">'+ '<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="确定" />'+ '<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>页'; } //分页处理 if(this.total <= 8){ for(var i=1;i<=this.total;i++){ if(this.pno == i){ str += '<span class="curr">'+i+'</span>'; }else{ str += '<a href="'+this.getLink(i)+'" title="第'+i+'页">'+i+'</a>'; } } }else{ if(this.pno <= 5){ for(var i=1;i<=7;i++){ if(this.pno == i){ str += '<span class="curr">'+i+'</span>'; }else{ str += '<a href="'+this.getLink(i)+'" title="第'+i+'页">'+i+'</a>'; } } str += dot; }else{ str += '<a href="'+this.getLink(1)+'" title="第1页">1</a>'; str += '<a href="'+this.getLink(2)+'" title="第2页">2</a>'; str += dot; var begin = this.pno - 2; var end = this.pno + 2; if(end > this.total){ end = this.total; begin = end - 4; if(this.pno - begin < 2){ begin = begin-1; } }else if(end + 1 == this.total){ end = this.total; } for(var i=begin;i<=end;i++){ if(this.pno == i){ str += '<span class="curr">'+i+'</span>'; }else{ str += '<a href="'+this.getLink(i)+'" title="第'+i+'页">'+i+'</a>'; } } if(end != this.total){ str += dot; } } } str = " "+str_prv + str + str_next + total_info + gopage_info; $("#"+this.pagerid).html(str); } };
html调用代码:
<div id="div_pager"></div> <script type="text/javascript"> //生成分页控件 kkpager.init({ pno : '${p.pageNo}', //总页码 total : '${p.totalPage}', //总数据条数 totalRecords : '${p.totalCount}', //链接前部 hrefFormer : '${hrefFormer}', //链接尾部 hrefLatter : '${hrefLatter}' }); kkpager.generPageHtml(); </script>
以上是示例中是必传参数,页码、总页数、总记录数这些是要根据获取服务端pager对象当相关值,还有可选的参数:pagerid、isShowTotalPage、isShowTotalRecords、isGoPage、getLink
注意链接算法哟,以下是默认链接算法(这个getLink方法也可以作为config参数):
js代码:
/****默认链接算法****/ getLink : function(n){ //这里的算法适用于比如: //hrefFormer=http://www.xx.com/news/20131212 //hrefLatter=.html //那么首页(第1页)就是http://www.xx.com/news/20131212.html //第2页就是http://www.xx.com/news/20131212_2.html //第n页就是http://www.xx.com/news/20131212_n.html if(n == 1){ return this.hrefFormer + this.hrefLatter; }else{ return this.hrefFormer + '_' + n + this.hrefLatter; } }
css代码:
#div_pager{ clear:both; height:30px; line-height:30px; margin-top:20px; color:#999999; } #div_pager a{ padding:4px 8px; margin:10px 3px; font-size:12px; border:1px solid #DFDFDF; background-color:#FFF; color:#9d9d9d; text-decoration:none; } #div_pager span{ padding:4px 8px; margin:10px 3px; font-size:14px; } #div_pager span.disabled{ padding:4px 8px; margin:10px 3px; font-size:12px; border:1px solid #DFDFDF; background-color:#FFF; color:#DFDFDF; } #div_pager span.curr{ padding:4px 8px; margin:10px 3px; font-size:12px; border:1px solid #FF6600; background-color:#FF6600; color:#FFF; } #div_pager a:hover{ background-color:#FFEEE5; border:1px solid #FF6600; } #div_pager span.normalsize{ font-size:12px; }
效果图:
1、没有数据或只有一页数据时效果
2、有多页时当效果
3、第5页效果
4、第6页效果(分页效果2)
5、第17页效果(接近尾页效果)
6、尾页效果
7、输入框焦点效果
最后注意,若要使用,使用时请修改分页获取链接当算法,不然不适用哟
里面输入框我把ID写死了,样式也是写当行内样式,懒得提取出来了,影响不大,各位看官若要用自己再修修,呵呵
相关推荐
界面简单美观,非常不错的js分页控件.仿淘宝分页按钮效果简单美观易实用当分页JS控件
主要介绍了基于JS分页控件实现简单美观仿淘宝分页按钮效果的相关资料,非常不错具有参考借鉴价值,需要的朋友可以参考下
简单分页控件c#简单分页控件c#简单分页控件c#简单分页控件c#
自己写的一个js分页控件.已经封装,可以直接使用. 适合各种用途的分页控制. 如果界面不够美观,只需要修改css即可.
淘宝分页控件 如果有打开MS Visual Studio,请先关闭。然后打开“安装.exe”,注册及添加控件到工具箱, 再打开MS Visual Studio,展开“工具箱”,即可看到已添加“AuthCode”的控件,直接拖到aspx 页面。在.cs后台...
仿淘宝分页插件 使用简单 jquery代码
分页按钮属性效果 使用自定义信息区 居中当前页索引按钮 Repeater分页 DataList分页 Url分页 使用Url重写技术 Url逆向分页 N层结构应用 使用XML文件数据源 图片浏览示例 使用AccessDataSource 使用SqlDataSource ...
分页控件分页控件分页控件分页控件分页控件分页控件分页控件分页控件分页控件分页控件分页控件分页控件分页控件分页控件分页控件
仿百度的分页控件风格,每次用户在10个页码中选择需要跳转到的页数。
分页控件分页控件分页控件分页控件分页控件分页控件分页控件分页控件分页控件分页控件分页控件分页控件分页控件分页控件分页控件
MvcPager分页控件MvcPager分页控件MvcPager分页控件MvcPager分页控件MvcPager分页控件MvcPager分页控件MvcPager分页控件MvcPager分页控件
C# winform分页控件,不绑定数据,简单好用。介绍看这里: https://blog.csdn.net/lixiaoxing2/article/details/108807519
使用分页控件之前 一定要看详细说明 先执行存储过程
java js 分页控件 java js 分页控件 java js 分页控件
一款简单实用的jQuery仿淘宝分页样式插件,完美兼容ie8,简单处理后可兼容更低版本ie。带输入页跳转,设置翻页容器,条目总数,每页条目数,当前页等默认功能。
WinForm自定义分页控件完整实例,导入可用
自己写的一个动态的分页控件并附带分页存储过程和源码示例
该源码为.NET Winform分页控件DevExpress版,源码有调用实例
Qt分页控件