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>