自己写的分页js分页插件 很low很实用

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;
35px;
left: 94%;
top: 14%;
}
.uparrow{
background:url(images/layout_arrows.png);
background-repeat:no-repeat;
background-position:-13px -15px;
height:16px;
24px;
margin-left: auto;
margin-right: auto;
}
.downarrow{
background:url(images/layout_arrows.png);
background-repeat:no-repeat;
background-position: -13px 0px;
height:16px;
24px;
margin-left: auto;
margin-right: auto;
}
.paginatorNum{
24px;
height: 24px;
margin-left: auto;
margin-right: auto;
text-align: center;
}
.paginator_selected_num{
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")));

原文地址:https://www.cnblogs.com/hyp5490-/p/5116150.html