var paginator = function(){
		this.number_of_pages;
		this.show_per_page;
		this.number_of_items;
		this.tab1_current_page;
		this.paginatorHelp;
		this.index;
		this.scoreData;
	}
	paginator.prototype.getPageDataAndSetPaginatorNum = function(data,ind,pth){
		 this.paginatorHelp = pth;
		 this.index = ind;
		 this.show_per_page = 5;
		 this.scoreData = data;
		 this.number_of_items = data.length;
		 this.number_of_pages = Math.ceil(this.number_of_items/this.show_per_page);
		 $("#totalNum"+this.index).html("共<br />"+this.number_of_pages+"<br />页");
		 var page_div_html = "";
		 page_div_html += ‘<div id="tab‘+this.index+‘1"class="paginator_selected_num" onclick="‘+this.paginatorHelp+‘.goto_page(‘+1+‘);">‘+1+‘</div>‘;
		 for(var i = 2; i <= this.number_of_pages && i<= 5; i++){
		 	 page_div_html += ‘<div id="tab‘+this.index+i+‘"class="paginatorNum" onclick="‘+this.paginatorHelp+‘.goto_page(‘+i+‘);">‘+i+‘</div>‘;
		 }
		 $("#pdt"+this.index+"div").html(page_div_html);
		 this.tab1_current_page = 1;
		 var startNum = (this.tab1_current_page-1)*this.show_per_page;
		 var endNum = this.tab1_current_page*this.show_per_page;
		 return this.scoreData.slice(startNum, endNum);
	}
	paginator.prototype.goto_page = function(page_num){
		this.move_page_num(page_num);
		$("#tab"+this.index+this.tab1_current_page).removeClass();
		$("#tab"+this.index+this.tab1_current_page).addClass(‘paginatorNum‘);
		this.tab1_current_page=page_num;
		$("#tab"+this.index+page_num).addClass(‘paginator_selected_num‘);
		var startNum = (page_num-1)*this.show_per_page;
		var endNum = (page_num)*this.show_per_page;
		$("#tab1content").html($.createElement(this.scoreData.slice(startNum, endNum)));
	}
	paginator.prototype.move_page_num = function(page_num){
		if($(‘#tab‘+this.index+page_num).prev().length==false && page_num != 1){
			var page_div_html = "";
		    for(var i = page_num - 1; i <= page_num + 3; i++){
				page_div_html += ‘<div id="tab‘+this.index+i+‘"class="paginatorNum" onclick="‘+this.paginatorHelp+‘.goto_page(‘+i+‘);">‘+i+‘</div>‘;
			}
			$("#pdt"+this.index+"div").html(page_div_html);
		}
		if($(‘#tab‘+this.index+page_num).next().length==false && page_num != this.number_of_pages){
			var page_div_html = "";
			for(var i = page_num - 3; i <= page_num + 1 ; i++){
				page_div_html += ‘<div id="tab‘+this.index+i+‘"class="paginatorNum" onclick="‘+this.paginatorHelp+‘.goto_page(‘+i+‘);">‘+i+‘</div>‘;
			}
			$("#pdt"+this.index+"div").html(page_div_html);
		}
	}
	paginator.prototype.prev = function(){
		if(this.tab1_current_page > 1)
			this.goto_page(this.tab1_current_page-1);
	}
	paginator.prototype.next = function(){
		if(this.tab1_current_page < this.number_of_pages)
			this.goto_page(this.tab1_current_page+1);
	}
	
.paginatorDiv{
	position: absolute;
    height: 240px;
    width: 35px;
    left: 94%;
    top: 14%;
}
.uparrow{
	background:url(images/layout_arrows.png);
  	background-repeat:no-repeat;
  	background-position:-13px -15px;
 	height:16px;
  	width:24px;
  	margin-left: auto;
    margin-right: auto;
}
.downarrow{
	background:url(images/layout_arrows.png);
  	background-repeat:no-repeat;
  	background-position: -13px 0px;
 	height:16px;
  	width:24px;	
  	margin-left: auto;
    margin-right: auto;
}
.paginatorNum{
	width:24px;	
	height: 24px;
	margin-left: auto;
    margin-right: auto;
	text-align: center;
}
.paginator_selected_num{
	width:24px;	
	height: 24px;
	margin-left: auto;
    margin-right: auto;
	text-align: center;
	background-color: blue;
    color: white;
}
<div id="tab2content" class="hotvideo">
			</div>
			<div id="paginatorDivtab1" class="paginatorDiv" style="display: none;">
				<div class="uparrow" onclick="paginatorHelp1.prev();"></div>
				
				<div id="pdt1div"></div>
				
				<div class="downarrow" onclick="paginatorHelp1.next();"></div>
				<div id="totalNum1" style="text-align: center;"></div>
			</div>
			<div id="paginatorDivtab2" class="paginatorDiv">
				<div class="uparrow" onclick="paginatorHelp2.prev();"></div>
				
				<div id="pdt2div"></div>
				
				<div class="downarrow" onclick="paginatorHelp2.next();"></div>
				<div id="totalNum2" style="text-align: center;"></div>
			</div>
 paginatorHelp1 = new paginator();
				$("#tab1content").html($.createElement(paginatorHelp1.getPageDataAndSetPaginatorNum(data.data,"1","paginatorHelp1")));
		
paginatorHelp2 = new paginator();
				$("#tab2content").html($.createElement(paginatorHelp2.getPageDataAndSetPaginatorNum(data.data,"2","paginatorHelp2")));
	
原文:http://www.cnblogs.com/hyp5490-/p/5116150.html