软件开发培训班 >> 编程开发 >> JavaScript


jquery 分页控件实现代码

　　本文标签：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>