基于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 pagination插件实现无刷新分页代码
Oct 13 Javascript
Extjs Ext.MessageBox.confirm 确认对话框详解
Apr 02 Javascript
javascript 函数参数限制说明
Nov 19 Javascript
jquery append()方法与html()方法的区别及使用介绍
Aug 01 Javascript
原创jQuery弹出层插件分享
Apr 02 Javascript
异步JavaScript编程中的Promise使用方法
Jul 28 Javascript
js验证框架实现代码分享
May 18 Javascript
Angularjs中使用指令绑定点击事件的方法
Mar 30 Javascript
Vue实现textarea固定输入行数与添加下划线样式的思路详解
Jun 28 Javascript
微信小程序实现日历效果
Dec 28 Javascript
angular多语言配置详解
May 16 Javascript
微信小程序new Date()方法失效问题解决方法
Jul 29 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 zend 相对路径问题
2009/01/12 PHP
PH P5.2至5.5、5.6的新增功能详解
2014/07/14 PHP
php实现的农历算法实例
2015/08/11 PHP
PHP中加速、缓存扩展的区别和作用详解(eAccelerator、memcached、xcache、APC )
2016/07/09 PHP
自动检查并替换文本框内的字符
2006/06/30 Javascript
静态的动态续篇之来点XML
2006/12/23 Javascript
基于jquery自定义的漂亮单选按钮RadioButton
2013/11/19 Javascript
jquery实现界面无刷新加载登陆注册
2016/07/30 Javascript
JavaScript闭包和回调详解
2017/08/09 Javascript
响应式框架Bootstrap栅格系统的实例
2017/12/19 Javascript
详解用Node.js写一个简单的命令行工具
2018/03/01 Javascript
Vue组件中prop属性使用说明实例代码详解
2018/05/31 Javascript
Angular通过指令动态添加组件问题
2018/07/09 Javascript
原生JS实现$.param() 函数的方法
2018/08/10 Javascript
React Native 混合开发多入口加载方式详解
2019/09/23 Javascript
浅谈python中的getattr函数 hasattr函数
2016/06/14 Python
python logging 日志轮转文件不删除问题的解决方法
2016/08/02 Python
Python函数中参数是传递值还是引用详解
2019/07/02 Python
Matplotlib自定义坐标轴刻度的实现示例
2020/06/18 Python
keras topN显示,自编写代码案例
2020/07/03 Python
pytorch简介
2020/11/11 Python
CSS3 @media的基本用法总结
2019/09/10 HTML / CSS
HTML5和CSS3实例教程总结(推荐)
2016/07/18 HTML / CSS
a标签下载链接的简单实现
2016/09/13 HTML / CSS
e路東瀛(JAPANiCAN)香港:日本旅游、日本酒店和温泉旅馆预订
2018/11/21 全球购物
Nicole Miller官方网站:纽约女装品牌
2019/09/14 全球购物
汽车工程专业应届生求职信
2013/10/19 职场文书
追悼会上的答谢词
2014/01/10 职场文书
个人委托书格式
2014/04/04 职场文书
募捐倡议书
2014/04/14 职场文书
田径运动会通讯稿
2014/09/13 职场文书
上班迟到检讨书300字
2014/10/18 职场文书
销售督导岗位职责
2015/04/10 职场文书
趣味运动会通讯稿
2015/07/18 职场文书
四年级作文之说明文作文
2019/10/14 职场文书
Android开发手册TextInputLayout样式使用示例
2022/06/10 Java/Android