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

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

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

分页按钮思想：

1、少于9页，全部显示

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

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

先看效果图：

01输入框焦点效果

02效果

模仿淘宝的分页按钮效果控件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 lt; 1 || n gt;this.total){ 
$("#btn_go_input").val(this.next); 
return; 
} 
//这里可以按需改window.open 
window.location = this.getLink(n); 
}, 
//分页按钮控件初始化 
init : function(config){ 
//赋值 
this.pno = isNaN(config.pno) #63; 1 : parseInt(config.pno); 
this.total = isNaN(config.total) #63; 1 : parseInt(config.total); 
this.totalRecords = isNaN(config.totalRecords) #63; 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 lt; 1) this.pno = 1; 
this.total = (this.total lt;= 1) #63; 1: this.total; 
if(this.pno gt; this.total) this.pno = this.total; 
this.prv = (this.pnolt;=2) #63; 1 : (this.pno-1); 
this.next = (this.pno gt;= this.total-1) #63; this.total : (this.pno + 1); 
this.hasPrv = (this.pno gt; 1); 
this.hasNext = (this.pno lt; this.total); 
this.inited = true; 
}, 
//生成分页控件Html 
generPageHtml : function(){ 
if(!this.inited){ 
return; 
} 
var str_prv='',str_next=''; 
if(this.hasPrv){ 
str_prv = 'lt;a href="'+this.getLink(this.prv)+'" title="上一页"gt;上一页lt;/agt;'; 
}else{ 
str_prv = 'lt;span class="disabled"gt;上一页lt;/spangt;'; 
} 
if(this.hasNext){ 
str_next = 'lt;a href="'+this.getLink(this.next)+'" title="下一页"gt;下一页lt;/agt;'; 
}else{ 
str_next = 'lt;span class="disabled"gt;下一页lt;/spangt;'; 
} 
var str = ''; 
var dot = 'lt;spangt;...lt;/spangt;'; 
var total_info=''; 
if(this.isShowTotalPage || this.isShowTotalRecords){ 
total_info = 'lt;span class="normalsize"gt;共'; 
if(this.isShowTotalPage){ 
total_info += this.total+'页'; 
if(this.isShowTotalRecords){ 
total_info += 'nbsp;/nbsp;'; 
} 
} 
if(this.isShowTotalRecords){ 
total_info += this.totalRecords+'条数据'; 
} 
total_info += 'lt;/spangt;'; 
} 
var gopage_info = ''; 
if(this.isGoPage){ 
gopage_info = 'nbsp;转到lt;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;"gt;'+ 
'lt;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="确定" /gt;'+ 
'lt;input type="text" id="btn_go_input" onfocus="kkpager.focus_gopage()" onkeypress="if(event.keyCodelt;48 || event.keyCodegt;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+'" /gt;lt;/spangt;页'; 
} 
//分页处理 
if(this.total lt;= 8){ 
for(var i=1;ilt;=this.total;i++){ 
if(this.pno == i){ 
str += 'lt;span class="curr"gt;'+i+'lt;/spangt;'; 
}else{ 
str += 'lt;a href="'+this.getLink(i)+'" title="第'+i+'页"gt;'+i+'lt;/agt;'; 
} 
} 
}else{ 
if(this.pno lt;= 5){ 
for(var i=1;ilt;=7;i++){ 
if(this.pno == i){ 
str += 'lt;span class="curr"gt;'+i+'lt;/spangt;'; 
}else{ 
str += 'lt;a href="'+this.getLink(i)+'" title="第'+i+'页"gt;'+i+'lt;/agt;'; 
} 
} 
str += dot; 
}else{ 
str += 'lt;a href="'+this.getLink(1)+'" title="第1页"gt;1lt;/agt;'; 
str += 'lt;a href="'+this.getLink(2)+'" title="第2页"gt;2lt;/agt;'; 
str += dot; 
var begin = this.pno - 2; 
var end = this.pno + 2; 
if(end gt; this.total){ 
end = this.total; 
begin = end - 4; 
if(this.pno - begin lt; 2){ 
begin = begin-1; 
} 
}else if(end + 1 == this.total){ 
end = this.total; 
} 
for(var i=begin;ilt;=end;i++){ 
if(this.pno == i){ 
str += 'lt;span class="curr"gt;'+i+'lt;/spangt;'; 
}else{ 
str += 'lt;a href="'+this.getLink(i)+'" title="第'+i+'页"gt;'+i+'lt;/agt;'; 
} 
} 
if(end != this.total){ 
str += dot; 
} 
} 
} 
str = "nbsp;"+str_prv + str + str_next + total_info + gopage_info; 
$("#"+this.pagerid).html(str); 
} 
}; 

html调用代码：

（编辑：佛山站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!