jq实现html分页代码,jquery 分页控件实现代码

jquery分页控件

var pageindex=1;

var totelsize=60;

var centersize=5;

var pagesize=0;

var totelSec=0;

var outStr="";

var se=""

+"5"

+"10"

+"15"

+"";

var firstdiv="

首页

";

var prediv="

上一页

";

var centerdiv="

var nextdiv="

下一页

";

var lastdiv="

最后一页

";

$('.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

{

pageindex =pageindex+1;

if(pageindex==size)

{

alert('到了最后一页');

}

else{

alert('到了第'+pageindex+'页');

}

}

ChangeCenterBar(pageindex-1);

}

var lastClick=function(e)

{

alert('点击了最后一页');

if(pageindex

{

pageindex=size;

alert('到了第'+size+'页');

}

}

var ChangeCenterBar=function(CurrentIndex)

{

var currentSec=parseInt(CurrentIndex/centersize);

if( CurrentIndex%centersize==1)

{

if(currentSec

{ PageBarinit();}

}

if(CurrentIndex%centersize==0)

{

var currentSec=parseInt(CurrentIndex/centersize);

if(currentSec

{ 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=""+i+"";

$('.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

{

// alert(9)

var startIndex=(currentSec-1)*centersize+1;

for(startIndex;startIndex<=currentSec*centersize;startIndex++)

{

//alert(startIndex)

//alert('最大'+currentSec*centersize);

var cdiv=""+startIndex+"";

$('.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=""+startIndex+"";

$('.centerclass').append(cdiv);

$("#Page_"+startIndex).bind('click',pageClick);

}

}else{

alert('分页出错');

}

}else if(pageindex%centersize>0)

{

var currentSec=parseInt(pageindex/centersize)+1;//当前区段

if(currentSec

{

var startIndex=(currentSec-1)*centersize+1;

for(startIndex;startIndex<=((currentSec-1)*centersize+centersize);startIndex++)

{

var cdiv=""+startIndex+"";

$('.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=""+startIndex+"";

$('.centerclass').append(cdiv);

$("#Page_"+startIndex).bind('click',pageClick);

}

}else

{

alert('分页出错');

}

}

}

}

PageReinit();

}

PageInit();