jquery 分页控件实现代码

复制代码代码如下:

　　<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

　　<head>

　　<title>jquery分页控件</title>

　　</head>

　　<body>

<!--<div>

　　</select>

　　</div>-->

　　</body>

　　</html>

　　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>

教程首页更多教程