jquery 分页控件实现代码

184 阅读 0 评论 122 点赞

我是靠谱客的博主有魅力店员，最近开发中收集的这篇文章主要介绍jquery 分页控件实现代码，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

复制代码代码如下:

 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" > 
<head> 
<title>jquery分页控件</title> 
<script src="jquery-1.3.min.js" type="text/javascript"></script> 
</head> 
<body> 
<div class="pager"></div> 
<!--<div> 
<select class="SEID"> 
<option>10</option> 
<option selected="selected" >20</option> 
<option>30</option> 
</select> 
<div class="first">首页</div> 
<div class="pre">上一页</div> 
<div class="centerclass"></div> 
<div class="next">下一页</div> 
<div class="last">最后一页</div> 
<input type="text" value="1" /> of<span class="totelspan">0</span> 
</div>--> 
</body> 
</html> 
<script type="text/javascript"> 
var pageindex=1; 
var totelsize=60; 
var centersize=5; 
var pagesize=0; 
var totelSec=0; 
var outStr=""; 
var se="<select class="SEID">" 
+"<option>5</option>" 
+"<option selected="selected" >10</option>" 
+"<option>15</option>" 
+"</select>"; 
var firstdiv="<div class="first">首页</div>"; 
var prediv="<div class="pre">上一页</div>"; 
var centerdiv="<div class="centerclass"></div>"; 
var nextdiv="<div class="next">下一页</div>"; 
var lastdiv="<div class="last">最后一页</div>"; 
$('.pager').empty(); 
$('.pager').append(se) 
$('.pager').append(firstdiv) 
$('.pager').append(prediv) 
$('.pager').append(centerdiv) 
$('.pager').append(nextdiv) 
$('.pager').append(lastdiv) 
function PageInit() 
{ 
var size=0; 
var barObj=this; 
var PageReinit=function() 
{ 
pagesize=$(".SEID option:selected")[0].innerText; 
size=parseInt(totelsize/pagesize) 
var lastSize=totelsize%pagesize;//最后一页显示记录 
if(lastSize>0) 
{ 
size=size+1; 
} 
totelSec=parseInt(size/centersize); 
var leftSize=size%centersize;//最后一个区段的显示记录 
if(leftSize>0) 
{ 
totelSec =totelSec+1; 
} 
PageBarinit(); 
} 
var reSetPage=function() 
{ 
pageindex=1; 
pagesize=0; 
totelSec=0; 
outStr=""; 
} 
// alert('总页数:'+size) 
// alert('总区段:'+totelSec) 
// alert('每页记录数：'+pagesize); 
var SeClick=function(e) 
{ 
var Selectindex=e.target[e.target.selectedIndex].innerText; 
pagesize=parseInt(Selectindex); 
alert('每页显示：'+Selectindex); 
reSetPage(); 
PageReinit(); 
} 
var firstClick=function(e) 
{ 
alert('点击到首页'); 
if(pageindex!=1) 
{ 
pageindex=1; 
alert('到了第1页'); 
} 
} 
var preClick=function(e) 
{ 
alert('点击到上一页'); 
if(pageindex!=1) 
{ 
pageindex =pageindex-1; 
alert('到了第'+pageindex+'页'); 
} 
ChangeCenterBar(pageindex+1); 
} 
var pageClick=function(e) 
{ 
var targePage=parseInt(e.target.innerText); 
pageindex=targePage; 
alert('点击了第'+targePage+"页"); 
ChangeCenterBar(targePage); 
} 
var nextClick=function(e) 
{ 
alert('点击了下一页'); 
if(pageindex<size) 
{ 
pageindex =pageindex+1; 
if(pageindex==size) 
{ 
alert('到了最后一页'); 
} 
else{ 
alert('到了第'+pageindex+'页'); 
} 
} 
ChangeCenterBar(pageindex-1); 
} 
var lastClick=function(e) 
{ 
alert('点击了最后一页'); 
if(pageindex<size) 
{ 
pageindex=size; 
alert('到了第'+size+'页'); 
} 
} 
var ChangeCenterBar=function(CurrentIndex) 
{ 
var currentSec=parseInt(CurrentIndex/centersize); 
if( CurrentIndex%centersize==1) 
{ 
if(currentSec<totelSec) 
{ PageBarinit();} 
} 
if(CurrentIndex%centersize==0) 
{ 
var currentSec=parseInt(CurrentIndex/centersize); 
if(currentSec<totelSec) 
{ PageBarinit();} 
} 
} 
var PageBarinit=function() 
{ 
$('.SEID').unbind('change',SeClick); 
$('.first').unbind('click',firstClick); 
$('.pre').unbind('click',preClick); 
$('.next').unbind('click',nextClick); 
$('.last').unbind('click',lastClick); 
$('.SEID').bind('change',SeClick); 
$('.first').bind('click',firstClick); 
$('.pre').bind('click',preClick); 
$('.next').bind('click',nextClick); 
$('.last').bind('click',lastClick); 
if(size<=centersize) 
{ 
$('.centerclass').empty(); 
for(var i=1;i<=size;i++) 
{ 
var cdiv="<span id='Page_"+String(i)+"'>"+i+"</span>"; 
$('.centerclass').append(cdiv); 
$("#Page_"+i).bind('click',pageClick); 
} 
}else if(size>centersize) 
{ 
$('.centerclass').empty(); 
if( pageindex%centersize==0) 
{ 
var currentSec=parseInt(pageindex/centersize);//当前区段 
if(currentSec<totelSec) 
{ 
// alert(9) 
var startIndex=(currentSec-1)*centersize+1; 
for(startIndex;startIndex<=currentSec*centersize;startIndex++) 
{ 
//alert(startIndex) 
//alert('最大'+currentSec*centersize); 
var cdiv="<span id='Page_"+String(startIndex)+"'>"+startIndex+"</span>"; 
$('.centerclass').append(cdiv); 
$("#Page_"+startIndex).bind('click',pageClick); 
} 
} 
else if(currentSec==totelSec) 
{ 
var startIndex=(currentSec-1)*centersize+1; 
for(startIndex;startIndex<=currentSec*centersize;startIndex++) 
{ 
var cdiv="<span id='Page_"+String(startIndex)+"'>"+startIndex+"</span>"; 
$('.centerclass').append(cdiv); 
$("#Page_"+startIndex).bind('click',pageClick); 
} 
}else{ 
alert('分页出错'); 
} 
}else if(pageindex%centersize>0) 
{ 
var currentSec=parseInt(pageindex/centersize)+1;//当前区段 
if(currentSec<totelSec) 
{ 
var startIndex=(currentSec-1)*centersize+1; 
for(startIndex;startIndex<=((currentSec-1)*centersize+centersize);startIndex++) 
{ 
var cdiv="<span id='Page_"+String(startIndex)+"'>"+startIndex+"</span>"; 
$('.centerclass').append(cdiv); 
$("#Page_"+startIndex).bind('click',pageClick); 
} 
} 
else if(currentSec==totelSec){ 
var startIndex=(currentSec-1)*centersize+1; 
for(startIndex;startIndex<=((currentSec-1)*centersize +size%centersize);startIndex++) 
{ 
var cdiv="<span id='Page_"+String(startIndex)+"'>"+startIndex+"</span>"; 
$('.centerclass').append(cdiv); 
$("#Page_"+startIndex).bind('click',pageClick); 
} 
}else 
{ 
alert('分页出错'); 
} 
} 
} 
} 
PageReinit(); 
} 
PageInit(); 
</script> 