自定义分页

前提需要引入jquery：

/**
 * 自定义分页
 * @param wrapId	最外层选择器
 * @param count	总计数量
 * @param rows	每页显示数量
 * @param totalP	总页数
 * @param currP	当前页
 * @param func	翻页回调函数
 * @returns
 */
function createPage(wrapId,count,rows,totalP,currP,func){	
	totalP = Number(totalP);
	currP = Number(currP);	
	var inputs = '', inner = '', prevStr = '', nextStr = '', pageList = '';
	var minP,maxP;
	
	inner = '<ul style="display: inline-block;vertical-align: middle;">';
	
	inputs = '<input value="'+count+'" type="hidden" name="count" class="count">'
			+'<input value="'+rows+'" type="hidden" name="rows" class="rows">'
			+'<input value="'+totalP+'" type="hidden" name="totalP" class="totalP">'
			+'<input value="'+currP+'" type="hidden" name="currP" class="currP">';	
	
	prevStr = '<li style="float: left;"><a href="javascript:'+func+'(\''+wrapId+'\',\''+count+'\',\''+rows+'\',\''+totalP+'\',\''+(currP-1)+'\',\''+func+'\');" class="prev ">上一页</a></li>'
				+'<li style="float: left;"><a href="javascript:'+func+'(\''+wrapId+'\',\''+count+'\',\''+rows+'\',\''+totalP+'\',\''+1+'\',\''+func+'\');" class="firstP">首页</a></li>';
	
	nextStr = '<li style="float: left;"><a href="javascript:'+func+'(\''+wrapId+'\',\''+count+'\',\''+rows+'\',\''+totalP+'\',\''+totalP+'\',\''+func+'\');" class="lastP">尾页</a></li>'
				+'<li style="float: left;"><a href="javascript:'+func+'(\''+wrapId+'\',\''+count+'\',\''+rows+'\',\''+totalP+'\',\''+(currP+1)+'\',\''+func+'\');" class="next">下一页</a></li>';
	
	if(totalP<=10){
		minP = 1;
		maxP = totalP;		
	}else{
		if(currP<=6){
			minP = 1;
			maxP = 10;
		}else{
			if((currP+4)<totalP){
				minP = currP-5;
				maxP = currP+4;
			}else{
				minP = totalP-9;
				maxP = totalP;
			}
		}		
	}	
//	console.log('totalP:'+totalP+';currP:'+currP+';minP:'+minP+';maxP:'+maxP);
	
	for(var i=minP; i<=maxP; i++){
		if(i == currP){
			pageList += '<li style="float: left;"><a href="javascript:'+func+'(\''+wrapId+'\',\''+count+'\',\''+rows+'\',\''+totalP+'\',\''+i+'\',\''+func+'\');" class="active">'+i+'</a></li>';
		}else{
			pageList += '<li style="float: left;"><a href="javascript:'+func+'(\''+wrapId+'\',\''+count+'\',\''+rows+'\',\''+totalP+'\',\''+i+'\',\''+func+'\');" class="">'+i+'</a></li>';
		}
	}
	inner += prevStr + pageList + nextStr;
	inner += '</ul>';
	inner += inputs;	

	$(wrapId).html(inner);
	
	//css样式
	$(wrapId).css({
		'text-align':'center',
		'padding':'10px'
	});
	$(wrapId).find('a').css({
		'height': '34px',
		'min-width':'40px',
		'width': '40px',
		'line-height': '32px',
		'border': '1px solid #ddd',
		'border-right-width': '0',
		'font-size': '12px',
		'display': 'inline-block',
		'text-decoration-line': 'none',
		'color': '#168dd1'
	});
	$(wrapId).find('a.prev,a.firstP,a.lastP,a.next').css({
		'width':'auto',
		'padding':'0 15px'
	});
	$(wrapId).find('a.prev').css({
		'border-top-left-radius':'4px',
		'border-bottom-left-radius':'4px'
	});
	$(wrapId).find('a.next').css({
		'border-top-right-radius':'4px',
		'border-bottom-right-radius':'4px',
		'border-right-width':'1px'
	});
	$(wrapId).find('a').hover(function(){
		$(this).css('background','#eee');
	},function(){
		$(this).css('background','transparent');
	});
	
	$(wrapId).find('a.active').css({
		'background':'#168dd1',
		'color':'#fff'
	});
	$(wrapId).find('a.disabled').css({
		'background':'transparent',
		'color':'#ddd',
		'cursor':'not-allowed'
	});
	
	if(currP<2){
		$(wrapId).find('.prev').addClass('disabled');
		$(wrapId).find('.firstP').addClass('disabled');
	}
	if(currP == totalP){
		$(wrapId).find('.lastP').addClass('disabled');
		$(wrapId).find('.next').addClass('disabled');
	}
}
/**
 * 翻页
 * @param wrapId
 * @param count
 * @param rows
 * @param totalP
 * @param currP
 * @param func
 * @returns
 */
function pageTurn(wrapId,count,rows,totalP,currP,func){
	totalP = Number(totalP);
	currP = Number(currP);
	if(currP<1){
		currP = 1;
	}
	if(currP>totalP){
		currP = totalP;
	}	
	createPage(wrapId,count,rows,totalP,currP,func);
	console.log('当前第 '+currP+' 页');
}