基于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 相关文章推荐
jQuery 1.3 和 Validation 验证插件1.5.1
Jul 09 Javascript
javascript与CSS复习(三)
Jun 29 Javascript
javascript利用apply和arguments复用方法
Nov 25 Javascript
浅析offsetLeft,Left,clientLeft之间的区别
Nov 30 Javascript
详解jquery中$.ajax方法提交表单
Nov 03 Javascript
JQuery替换DOM节点的方法
Jun 11 Javascript
JavaScript截断字符串的方法
Jul 15 Javascript
老生常谈javascript变量的命名规范和注释
Sep 29 Javascript
JS双击变input框批量修改内容
Dec 12 Javascript
在nginx上部署vue项目(history模式)的方法
Dec 28 Javascript
详解React+Koa实现服务端渲染(SSR)
May 23 Javascript
深入学习js函数的隐式参数 arguments 和 this
Jun 24 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
兼容PHP5的PHP目录管理函数库
2008/07/10 PHP
php引用返回与取消引用的详解
2013/06/08 PHP
PHP实现的统计数据功能详解
2016/12/06 PHP
PHP调用微博接口实现微博登录的方法示例
2018/09/22 PHP
JavaScript触发器详解
2007/03/10 Javascript
js loading加载效果实现代码
2009/11/24 Javascript
js浮点数保留两位小数点示例代码(四舍五入)
2013/12/26 Javascript
JavaScript中的DSL元编程介绍
2015/03/15 Javascript
JavaScript 实现的 zip 压缩和解压缩工具包Zip.js使用详解
2015/12/14 Javascript
React.js入门学习第一篇
2016/03/30 Javascript
不同js异步函数同步的实现方法
2016/05/28 Javascript
jQuery简单实现上下,左右滑动的方法
2016/06/01 Javascript
EditPlus 正则表达式 实战(3)
2016/12/15 Javascript
原生js实现淘宝购物车功能
2020/06/23 Javascript
JavaScript实现短暂提示框功能
2018/04/04 Javascript
微信小程序 数据缓存实现方法详解
2019/08/26 Javascript
[05:39]2014DOTA2西雅图国际邀请赛 淘汰赛7月14日TOPPLAY
2014/07/14 DOTA
[35:26]DOTA2上海特级锦标赛B组小组赛#2 VG VS Fnatic第三局
2016/02/26 DOTA
简单解决Python文件中文编码问题
2015/11/22 Python
django开发教程之利用缓存文件进行页面缓存的方法
2017/11/10 Python
用pandas按列合并两个文件的实例
2018/04/12 Python
Python基于递归和非递归算法求两个数最大公约数、最小公倍数示例
2018/05/21 Python
Flask模拟实现CSRF攻击的方法
2018/07/24 Python
Python读写文件模式和文件对象方法实例详解
2019/09/17 Python
详解Pycharm出现out of memory的终极解决方法
2020/03/03 Python
python dict乱码如何解决
2020/06/07 Python
Django中template for如何使用方法
2021/01/31 Python
什么是动态端口(Dynamic Ports)?动态端口的范围是多少?
2014/12/12 面试题
清洁工岗位职责
2015/02/13 职场文书
办公室行政主管岗位职责
2015/04/09 职场文书
社区党务工作总结2015
2015/05/19 职场文书
借条格式范本
2015/05/25 职场文书
关于环保的宣传稿
2015/07/23 职场文书
总经理聘用协议书
2015/09/21 职场文书
Spring依赖注入多种类型数据的示例代码
2022/03/31 Java/Android
css3手动实现pc端横向滚动
2022/06/21 HTML / CSS