基于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选择器之基本选择器、层次选择器
Feb 07 Javascript
Extjs中RowExpander控件的默认展开问题示例探讨
Jan 24 Javascript
js不能获取隐藏的div的宽度只能先显示后获取
Sep 04 Javascript
分享两款带遮罩的jQuery弹出框
Dec 30 Javascript
jQuery 翻页组件yunm.pager.js实现div局部刷新的思路
Aug 11 Javascript
javascript函数中的3个高级技巧
Sep 22 Javascript
Angular 1.x个人使用的经验小结
Jul 19 Javascript
使用pm2部署node生产环境的方法步骤
Mar 09 Javascript
node.js监听文件变化的实现方法
Apr 17 Javascript
jQuery+ajax实现批量删除功能完整示例
Jun 06 jQuery
详解如何在JS代码中消灭for循环
Dec 11 Javascript
vue@cli3项目模板怎么使用public目录下的静态文件
Jul 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(7) php 字符串相关应用
2010/03/05 PHP
解析php DOMElement 操作xml 文档的实现代码
2013/05/10 PHP
phpmyadmin出现Cannot start session without errors问题解决方法
2014/08/14 PHP
php 读取输出其他文件的实现方法
2016/07/26 PHP
Javascript改变CSS样式(局部和全局)
2013/12/18 Javascript
table insertRow、deleteRow定义和用法总结
2014/05/14 Javascript
Jquery中基本选择器用法实例详解
2015/05/18 Javascript
Node.js+Express配置入门教程详解
2016/05/19 Javascript
Bootstrap轮播插件简单使用方法介绍
2016/06/21 Javascript
JavaScript类型系统之布尔Boolean类型详解
2016/06/26 Javascript
基于WebUploader的文件上传js插件
2016/08/19 Javascript
Jqprint实现页面打印
2017/01/06 Javascript
纯html+css+javascript实现楼层跳跃式的页面布局(实例代码)
2017/10/25 Javascript
深入理解Vue 单向数据流的原理
2017/11/09 Javascript
微信小程序模拟cookie的实现
2018/06/20 Javascript
Vue项目中使用better-scroll实现一个轮播图自动播放功能
2018/12/03 Javascript
详解vue 2.6 中 slot 的新用法
2019/07/09 Javascript
node.js使用mongoose操作数据库实现购物车的增、删、改、查功能示例
2019/12/23 Javascript
JS关闭子窗口并且刷新上一个窗口的实现示例
2020/03/10 Javascript
vue中使用带隐藏文本信息的图片、图片水印的方法
2020/04/24 Javascript
JS事件循环机制event loop宏任务微任务原理解析
2020/08/04 Javascript
python基础教程之常用运算符
2014/08/29 Python
python实现合并两个数组的方法
2015/05/16 Python
Python实现翻转数组功能示例
2018/01/12 Python
python 返回列表中某个值的索引方法
2018/11/07 Python
pytorch下使用LSTM神经网络写诗实例
2020/01/14 Python
pytorch方法测试详解——归一化(BatchNorm2d)
2020/01/15 Python
tensorflow模型的save与restore,及checkpoint中读取变量方式
2020/05/26 Python
基于Python绘制个人足迹地图
2020/06/01 Python
应届生护士求职信
2013/11/01 职场文书
大堂副理的岗位职责范文
2014/02/17 职场文书
网站美工岗位职责
2014/04/02 职场文书
大学生学年个人总结
2015/02/15 职场文书
教师年度考核自我评鉴
2015/08/11 职场文书
python实现ROA算子边缘检测算法
2021/04/05 Python
Vue项目中如何封装axios(统一管理http请求)
2021/05/02 Vue.js