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


Posted in Javascript onNovember 07, 2016

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

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

分页按钮思想:

1、少于9页,全部显示

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

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

先看效果图:

01输入框焦点效果

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

02效果

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

模仿淘宝的分页按钮效果控件kkpager JS代码:

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调用代码:

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、没有数据或只有一页数据时效果

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

2、有多页时当效果

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

3、第5页效果

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

4、第6页效果(分页效果2)

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

5、第17页效果(接近尾页效果)

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

6、尾页效果

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

7、输入框焦点效果

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

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

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

以上所述是小编给大家介绍的基于JS分页控件实现简单美观仿淘宝分页按钮效果,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
ExtJS Grid使用SimpleStore、多选框的方法
Nov 20 Javascript
基于jquery的一个图片hover的插件
Apr 24 Javascript
jQuery使用toggleClass方法动态添加删除Class样式的方法
Mar 26 Javascript
javascript无刷新评论实现方法
May 13 Javascript
jQuery 遍历函数详解
Jul 05 Javascript
js实现PC端和移动端刮卡效果
Mar 27 Javascript
JavaScript函数表达式详解及实例
May 05 Javascript
基于vue 开发中出现警告问题去除方法
Jan 25 Javascript
Bootstrap实现的表格合并单元格示例
Feb 06 Javascript
Vuex入门到上手教程
Jun 20 Javascript
JavaScript oncopy事件用法实例解析
May 13 Javascript
vue-以文件流-blob-的形式-下载-导出文件操作
Aug 07 Javascript
easyui form validate总是返回false的原因及解决方法
Nov 07 #Javascript
jquery文字填写自动高度的实现方法
Nov 07 #Javascript
JS 全屏和退出全屏详解及实例代码
Nov 07 #Javascript
easyui tree带checkbox实现单选的简单实例
Nov 07 #Javascript
vue.js初学入门教程(2)
Nov 07 #Javascript
AngularJS递归指令实现Tree View效果示例
Nov 07 #Javascript
基于Bootstrap仿淘宝分页控件实现代码
Nov 07 #Javascript
You might like
PHP mb_convert_encoding文字编码的转换函数介绍
2011/11/10 PHP
分享下页面关键字抓取www.icbase.com站点代码(带asp.net参数的)
2014/01/30 PHP
php生成zip文件类实例
2015/04/07 PHP
php实现文件与16进制相互转换的方法示例
2017/02/16 PHP
详谈php ip2long 出现负数的原因及解决方法
2017/04/05 PHP
PHP单例模式实例分析【防继承,防克隆操作】
2019/05/22 PHP
jquery checkbox,radio是否选中的判断代码
2010/03/20 Javascript
javaScript面向对象继承方法经典实现
2013/08/20 Javascript
HTTP 304错误的详细讲解
2013/11/13 Javascript
浅析document.ready和window.onload的区别讲解
2013/12/18 Javascript
js 删除数组的几种方法小结
2014/02/21 Javascript
我的Node.js学习之路(二)NPM模块管理
2014/07/06 Javascript
js跨域问题浅析及解决方法优缺点对比
2014/11/08 Javascript
举例讲解如何判断JavaScript中对象的类型
2016/04/22 Javascript
理解javascript中的闭包
2017/01/11 Javascript
详解vue.js+UEditor集成 [前后端分离项目]
2017/07/07 Javascript
Vue.js项目部署到服务器的详细步骤
2017/07/17 Javascript
JavaScript中in和hasOwnProperty区别详解
2017/08/04 Javascript
给vue项目添加ESLint的详细步骤
2017/09/29 Javascript
js 客户端打印html 并且去掉页眉、页脚的实例
2017/11/03 Javascript
原生JavaScript实现todolist功能
2018/03/02 Javascript
使用Angular 6创建各种动画效果的方法
2018/10/10 Javascript
[09:40]DAC2018 4.5 SOLO赛 MidOne vs Miracle
2018/04/06 DOTA
轻松掌握python设计模式之访问者模式
2016/11/18 Python
Pycharm2017版本设置启动时默认自动打开项目的方法
2018/10/29 Python
Python Pandas对缺失值的处理方法
2019/09/27 Python
Python Process多进程实现过程
2019/10/22 Python
Python爬虫解析网页的4种方式实例及原理解析
2019/12/30 Python
推荐10个CSS3 制作的创意下拉菜单效果
2014/02/11 HTML / CSS
美丽的现代设计家具:2Modern
2018/07/26 全球购物
Timberland澳大利亚官网:全球领先的户外品牌
2019/12/10 全球购物
解释一下Windows的消息机制
2014/01/30 面试题
市政施工员自我鉴定
2014/01/15 职场文书
局机关干部群众路线个人对照检查材料思想汇报
2014/10/05 职场文书
2016年学校十一国庆节活动总结
2016/04/01 职场文书
springboot @ConfigurationProperties和@PropertySource的区别
2021/06/11 Java/Android