仿淘宝分页按钮效果简单美观易使用的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代码：

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 = '上一页';
			}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.isShowTotalPage){
					total_info += this.total+'页';
					if(this.isShowTotalRecords){
						total_info += ' / ';
					}
				}
				if(this.isShowTotalRecords){
					total_info += this.totalRecords+'条数据';
				}
				
				total_info += '';
			}
			
			var gopage_info = '';
			if(this.isGoPage){
				gopage_info = ' 转到'+
					''+
					'页';
			}
			
			//分页处理
			if(this.total <= 8){
				for(var i=1;i<=this.total;i++){
					if(this.pno == i){
						str += ''+i+'';
					}else{
						str += ''+i+'';
					}
				}
			}else{
				if(this.pno <= 5){
					for(var i=1;i<=7;i++){
						if(this.pno == i){
							str += ''+i+'';
						}else{
							str += ''+i+'';
						}
					}
					str += dot;
				}else{
					str += '1';
					str += '2';
					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 += ''+i+'';
						}else{
							str += ''+i+'';
						}
					}
					if(end != this.total){
						str += dot;
					}
				}
			}
			
			str = " "+str_prv + str + str_next  + total_info + gopage_info;
			$("#"+this.pagerid).html(str);
		}
};

html调用代码：

以上是示例中是必传参数， 页码、总页数、总记录数这些是要根据获取服务端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写死了，样式也是写当行内样式，懒得提取出来了，影响不大，各位看官若要用自己再修修，呵呵

• 
• 大小: 23.3 KB

• 
• 大小: 18.9 KB

• 
• 大小: 18 KB

• 
• 大小: 20.7 KB

• 
• 大小: 20.4 KB

• 
• 大小: 22 KB

• 
• 大小: 13 KB

• kkpager-v1.2.zip (53.3 KB)
• 下载次数: 493

• kkpager-v1.0.zip (51 KB)
• 下载次数: 106

• kkpager-v1.3.zip (58.2 KB)
• 下载次数: 382

• 查看图片附件