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" οnclick="'+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" οnclick="'+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" οnclick="'+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" οnclick="'+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" οnclick="paginatorHelp1.prev();"></div>

<div id="pdt1div"></div>

<div class="downarrow" οnclick="paginatorHelp1.next();"></div>

<div id="totalNum1" style="text-align: center;"></div>

</div>

<div id="paginatorDivtab2" class="paginatorDiv">

<div class="uparrow" οnclick="paginatorHelp2.prev();"></div>

<div id="pdt2div"></div>

<div class="downarrow" οnclick="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")));