分页按钮思想:
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 = 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 += '&nbsp;/&nbsp;';
}
}
if(this.isShowTotalRecords){
total_info += this.totalRecords+'条数据';
} total_info += '</span>';
} var gopage_info = '';
if(this.isGoPage){
gopage_info = '&nbsp;转到<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 = "&nbsp;"+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写死了,样式也是写当行内样式,懒得提取出来了,影响不大,各位看官若要用自己再修改一下,呵呵 。

漂亮!Javascript代码模仿淘宝宝贝搜索结果的分页显示效果的更多相关文章

  1. 淘宝主搜索离线集群完成Hadoop 2

    淘宝搜索离线dump集群(hadoop&hbase)2013进行了几次重大升级,本文中将这些升级的详细过程.升级中所遇到的问题以及这些问题的解决方案分享给大家.至此,淘宝主搜索离线集群完全进入 ...

  2. android ------ RecyclerView 模仿淘宝购物车

    电商项目中常常有购物车这个功能,做个很多项目了,都有不同的界面,选了一个来讲一下. RecyclerView 模仿淘宝购物车功能(删除选择商品,商品计算,选择, 全选反选,商品数量加减等) 看看效果图 ...

  3. 爬虫实战【8】Selenium解析淘宝宝贝-获取多个页面

    作为全民购物网站的淘宝是在学习爬虫过程中不可避免要打交道的一个网站,而是淘宝上的数据真的很多,只要我们指定关键字,将会出现成千上万条数据. 今天我们来讲一下如何从淘宝上获取某一类宝贝的信息,比如今天我 ...

  4. 模仿淘宝首页写的高仿页面,脚本全用的原生JS,菜鸟一枚高手看了勿喷哈

    自己仿照淘宝首页写的页面,仿真度自己感觉可以.JS脚本全是用原生JavaScript写得,没用框架.高手看了勿喷,请多多指正哈!先上网页截图看看效果,然后上源码: 上源码,先JavaScript : ...

  5. 模仿 "淘宝彩票" 的随机选球投注效果!

    我个人比较喜欢看网页的效果,前几天看了淘宝的“淘宝彩票”,今天仿造做了一个,我觉得比淘宝的体验要好. 查看 “淘宝彩票” 的网页源码发现,主要是用到了Css3 transform 的 Matrix 来 ...

  6. 淘宝语音搜索的实现——html5

    作为一个专业的淘宝控,不知道从什么时候开始发现淘宝上居然还有语音搜索,好吧,因为好奇心作祟还是想一探究竟.不过我想仔细一点的人,都会发现在只有在webkit内核的浏览器上有,原因是它只支持webkit ...

  7. 关于django 京东淘宝 混合搜索实现原理

    混合搜索在各大网站如京东.淘宝都有应用,他们的原理都是什么呢?本博文将为你介绍它们的实现过程. 混合搜索的原理,用一句话来说就是:关键字id进行拼接. 混合搜索示例: 数据库设计: 视频方向: 1 2 ...

  8. selenium+chrome抓取淘宝宝贝-崔庆才思路

    站点分析 源码及遇到的问题 在搜索时,会跳转到登录界面 step1:干起来! 先取cookie step2:载入cookie step3:放飞自我 关于phantomJS浏览器的问题 源码 站点分析 ...

  9. jQuery模仿淘宝商品评价

    最近做项目要做个商品评价的功能,我直接就跑到淘宝那里去研究了,可看着晕晕的,还不知道他是怎么做的,于是把图抠了下来,自己写了一个,接下来就展示一下我是怎么做的,大家有不同的实现方法可要记得分享一下呀. ...

随机推荐

  1. vue之Mutations 理解

    commit:提交可以在组件中使用 this.$store.commit('xxx') 提交 mutation,或者使用 mapMutations 辅助函数将组件中的 methods 映射为 stor ...

  2. Beta阶段DAY5

    一.提供当天站立式会议照片一张 二.每个人的工作 1.讨论项目每个成员的昨天进展 刘阳航:改进UI,美化界面. 林庭亦:优化代码结构 郑子熙:改进UI,美化界面. 陈文俊:优化代码结构 2.讨论项目每 ...

  3. 联想本win10 virtualbox 安装centos

    (1)必须开发操作系统虚拟化功能,参考该百度经验 https://jingyan.baidu.com/article/8275fc864d423e46a03cf638.html (2)调整虚拟机硬盘和 ...

  4. [转帖] 固定硬盘接口 U.2和M.2

    U.2接口 U.2接口别称SFF-8639,是由固态硬盘形态工作组织(SSD Form Factor Work Group)推出的接口规范.U.2不但能支持SATA-Express规范,还能兼容SAS ...

  5. 2013杭州网赛 1001 hdu 4738 Caocao's Bridges(双连通分量割边/桥)

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=4738 题意:有n座岛和m条桥,每条桥上有w个兵守着,现在要派不少于守桥的士兵数的人去炸桥,只能炸一条桥 ...

  6. LINQ to SQL和Entity Framework

    LINQ to SQL和Entity Framework都是一种包含LINQ功能的对象关系映射技术. 那么为什么会有LINQ这个东西的出现呢. 简单来说LINQ是为了满足不知道怎么操作数据库的程序员开 ...

  7. oracle exp导出加上过滤条件

    exp username/password@dbname   file='d:\hehe.dmp' tables=(%) query="""where UPDATE_DT ...

  8. 【刷题】BZOJ 4816 [Sdoi2017]数字表格

    Description Doris刚刚学习了fibonacci数列.用f[i]表示数列的第i项,那么 f[0]=0 f[1]=1 f[n]=f[n-1]+f[n-2],n>=2 Doris用老师 ...

  9. SHA1WithRSA签名 规范化标准签名

    #region CerRsaSignature 根据私钥签名 /// <summary> /// 根据私钥串签名 /// </summary> /// <param na ...

  10. 项目管理---git----遇到问题------.gitignore不起作用

    情况 在管理一个版本库时,有时候不想要管理某些文件,这个时候我就把这个问价写到.gitignore文件中,这样应该就可以将这个文件忽略,不再进行·版本管理了,但是经常出现的情况是:将这些文件名写到其中 ...