- 浏览: 361111 次
- 性别:
- 来自: 重庆
文章分类
- 全部博客 (98)
- J2EE (16)
- 杂谈 (10)
- ibatis (1)
- 正则表达式 (2)
- extjs (6)
- plsql developer (1)
- javascript (18)
- oracle (2)
- eclipse (4)
- java (4)
- IT管理 (2)
- 加密解密 (4)
- linux (2)
- web前端 (5)
- chrome (1)
- J2EE hibernate (0)
- ruby (10)
- rails (8)
- mac (1)
- mysql (3)
- luajava (1)
- css (3)
- 分页按钮控件 (1)
- 编程思想 (2)
- github (1)
- 设计模式 (1)
- hibernate (1)
- highcharts (1)
- map (1)
- intelliJ idea (1)
- sql (1)
- maven (1)
- layui (1)
最新评论
-
an8695001:
大神,这个支持ajax获取数据来分页吗?
仿淘宝分页按钮效果简单美观易使用的JS分页控件 -
aspwzmuma:
太好了~感谢作者~~!!
仿淘宝分页按钮效果简单美观易使用的JS分页控件 -
GlacialDrift:
click 模式下面 不能重新初始化吗?
仿淘宝分页按钮效果简单美观易使用的JS分页控件 -
jia_xin:
请问同一个页面可以支持多个分页么?
仿淘宝分页按钮效果简单美观易使用的JS分页控件 -
zhouxi:
有没有完整的代码做参考啊 那个网站必须注册,而且注册还需要邀请 ...
echarts实现环形进度图
最新版本代码请移步到https://github.com/pgkk/kkpager
在线测试链接:http://pgkk.github.io/kkpager/example/pager_test.html
分页按钮思想:
1、少于9页,全部显示
2、大于9页,1、2页显示,中间页码当前页为中心,前后各留两个页码
附件中有完整例子的压缩包下载。已更新到最新版本
先看效果图:
01输入框焦点效果
02效果
模仿淘宝的分页按钮效果控件kkpager JS代码:
html调用代码:
以上是示例中是必传参数,页码、总页数、总记录数这些是要根据获取服务端pager对象当相关值,还有可选的参数:pagerid、isShowTotalPage、isShowTotalRecords、isGoPage、getLink
注意链接算法哟,以下是默认链接算法(这个getLink方法也可以作为config参数):
CSS代码:
效果图:
1、没有数据或只有一页数据时效果
2、有多页时当效果
3、第5页效果
4、第6页效果(分页效果2)
5、第17页效果(接近尾页效果)
6、尾页效果
7、输入框焦点效果
最后注意,若要使用,使用时请修改分页获取链接当算法,不然不适用哟
里面输入框我把ID写死了,样式也是写当行内样式,懒得提取出来了,影响不大,各位看官若要用自己再修修,呵呵
1.3版本的不需要改,直接用就可以了。domId这些也提供了参数的
直接用?怎么直接用哦?搞不明白,请指教!
示例链接:http://pgkk.github.io/kkpager/example/pager_test.html
你也可以打开页面后你右键打开查看源代码撒。。
1.3版本的不需要改,直接用就可以了。domId这些也提供了参数的
直接用?怎么直接用哦?搞不明白,请指教!
1.3版本的不需要改,直接用就可以了。domId这些也提供了参数的
只是展示分页,不关注具体分页逻辑。后面新增了click模式,可以配置click方法点击按钮时回调。最新代码在https://github.com/pgkk/kkpager
没有呀 我试了下可以下载
在线测试链接:http://pgkk.github.io/kkpager/example/pager_test.html
分页按钮思想:
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 = config.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参数):
/****默认链接算法****/ 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写死了,样式也是写当行内样式,懒得提取出来了,影响不大,各位看官若要用自己再修修,呵呵
- kkpager-v1.2.zip (53.3 KB)
- 下载次数: 493
- kkpager-v1.0.zip (51 KB)
- 下载次数: 106
- kkpager-v1.3.zip (58.2 KB)
- 下载次数: 382
评论
15 楼
an8695001
2016-07-12
大神,这个支持ajax获取数据来分页吗?
14 楼
aspwzmuma
2015-10-28
太好了~感谢作者~~!!
13 楼
GlacialDrift
2015-08-31
click 模式下面 不能重新初始化吗?
12 楼
jia_xin
2015-04-23
请问同一个页面可以支持多个分页么?
11 楼
chamcon
2015-03-24
polor2012 写道
chamcon 写道
polor2012 写道
不会改,怎么改,大神支招
1.3版本的不需要改,直接用就可以了。domId这些也提供了参数的
直接用?怎么直接用哦?搞不明白,请指教!
示例链接:http://pgkk.github.io/kkpager/example/pager_test.html
你也可以打开页面后你右键打开查看源代码撒。。
10 楼
polor2012
2015-03-19
chamcon 写道
polor2012 写道
不会改,怎么改,大神支招
1.3版本的不需要改,直接用就可以了。domId这些也提供了参数的
直接用?怎么直接用哦?搞不明白,请指教!
9 楼
chamcon
2015-03-14
polor2012 写道
不会改,怎么改,大神支招
1.3版本的不需要改,直接用就可以了。domId这些也提供了参数的
8 楼
polor2012
2015-03-11
不会改,怎么改,大神支招
7 楼
xion_java
2014-11-26
我还没看懂要怎么使用 link模式和click模式到底什么区别啊? 那个链接头部和链接尾部在具体使用中怎么设置啊?
6 楼
chamcon
2014-08-09
shalousun 写道
没有回调吗
只是展示分页,不关注具体分页逻辑。后面新增了click模式,可以配置click方法点击按钮时回调。最新代码在https://github.com/pgkk/kkpager
5 楼
shalousun
2014-07-30
没有回调吗
4 楼
fanger_so
2014-04-04
感谢
3 楼
chamcon
2013-12-08
LinApex 写道
下载资源失效了
没有呀 我试了下可以下载
2 楼
LinApex
2013-12-08
下载资源失效了
1 楼
greatwqs
2013-12-07
发表评论
-
使用iframe做动态内容的重复加载、加载两次或多次的问题解决
2015-09-19 23:26 5327今天发现使用iframe做动态内容时不易察觉的一个问题: ... -
使用iframe做动态内容的重复加载、加载两次或多次的问题解决
2015-09-19 23:17 1今天发现使用iframe做动态内容时不易察觉的一个问题: ... -
echarts实现环形进度图
2015-03-14 12:09 36064//环形进度图 TgsChartsUtil.drawCi ... -
重庆实时路况(基于百度MAP API)
2014-09-19 11:34 8879本例提供附件下载 效果图: 代码: <!D ... -
javascript 读取xml 解析xml文件
2014-04-01 10:00 7751js读取xml文件 function loadXML(x ... -
Javascript 新历转旧历|阳历转阴历|公历转农历算法代码
2014-04-01 09:55 1484var LunarDate = { madd: ... -
自定义对象与dom对象合并
2014-03-26 11:14 1008<script type="text/jav ... -
JavaScript 中小数和大整数的精度丢失
2014-03-17 17:29 1114先来看两个问题: 0.1 + 0.2 == 0.3; ... -
整理推荐的CSS属性书写顺序
2014-03-17 16:29 793一. Mozilla 建议CSS规则 [h ... -
js 与或运算符 || && 妙用
2014-03-17 15:38 694首先出个题:如图: 假设对成长速度显示规定如下: 成长速度 ... -
JS小数点判断
2014-03-13 18:02 862JS小数点判断 1.只取小数点后两位:& ... -
Chrome 控制台新玩法-向输出到console的文字加样式
2014-03-13 15:44 4520console.log(msg) 这个指令是在浏览器控制 ... -
javascript中==与===的区别
2014-03-10 18:21 1004首先,先做个简单的介绍,让先有个直观的认识 == equa ... -
Web中连续触发事件影响性能的解决办法
2014-03-05 10:54 2018当类似用户改变浏览器窗口大小的事件,有可能 ... -
div嵌套引起的margin-top不起作用
2013-11-29 23:49 1671div嵌套引起的margin-top不起作用 (20 ... -
Java调用Lua脚本(LuaJava使用、安装及Linux安装编译)
2013-11-08 11:09 10866依赖包(附件有下载): 包名类型操作系统luajava-1.1 ... -
网页中嵌入swf文件的几种方法
2013-02-22 16:42 22891. object + embed 传统的方法 优 ... -
Extjs的一些常用工具方法
2012-10-10 14:40 1429一、Ext 1.1 Ext.isEmp ... -
JS将字符串形式的日期转换成Date日期对象
2012-10-10 14:34 2826js 将字符串转换为Date类型,并与当前时间比较JavaSc ... -
resize 事件的兼容性问题研究
2012-09-07 14:24 2109先了解一下浏览器拖拉触发resize的方式。 例如在xp的 ...
相关推荐
界面简单美观,非常不错的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分页控件