代码如下:
<!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)
{
新闻热点
疑难解答
图片精选