jquery 分页控件实现代码
来源：互联网 发布：mac java9.0怎么卸载 编辑：程序博客网 时间：2024/05/21 06:59
<!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>
