最新版本代码请移步到
分页按钮思想：
1、少于9页，全部显示
2、大于9页，1、2页显示，中间页码当前页为中心，前后各留两个页码
附件中有完整例子的压缩包下载。已更新到最新版本
先看效果图：
01输入框焦点效果
02效果
Js代码
页码
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 = '';
}else{
str_prv = '';
}
if(this.hasNext){
str_next = '';
}else{
str_next = '下一页';
}
var str = '';
var dot = '...';
var total_info='';
if(this.isShowTotalPage || this.isShowTotalRecords){
total_info = ''+
'页';
}
//分页处理
if(this.total <= 8){
for(var i=1;i<=this.total;i++){
if(this.pno == i){
str += '';
}else{
str += '';
}
}
}else{
if(this.pno <= 5){
for(var i=1;i<=7;i++){
if(this.pno == i){
str += '';
}else{
str += '';
}
}
str += dot;
}else{
str += '';
str += '';
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 += '';
}else{
str += '';
}
}
if(end != this.total){
str += dot;
}
}
}
str = ""+str_prv + str + str_next + total_info + gopage_info;
$("#"+this.pagerid).html(str);
}
};
以上是示例中是必传参数，页码、总页数、总记录数这些是要根据获取服务端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代码：
效果图：
1、没有数据或只有一页数据时效果
2、有多页时当效果
3、第5页效果
6、尾页效果
7、输入框焦点效果
最后注意，若要使用，使用时请修改分页获取链接当算法，不然不适用哟
里面输入框我把ID写死了，样式也是写当行内样式，懒得提取出来了，影响不大，各位看官若要用自己再修修，呵呵
以上所述是小编给大家介绍的基于JS分页控件实现简单美观仿淘宝分页按钮效果。编程之家 jb51.cc 收集整理的教程希望能对你有所帮助，如果觉得编程之家不错，可分享给好友！感谢支持。
原文链接：/js/44597.html