<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=1i<=sizei++)
{
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(startIndexstartIndex<=currentSec*centersizestartIndex++)
{
//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(startIndexstartIndex<=currentSec*centersizestartIndex++)
{
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(startIndexstartIndex<=((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(startIndexstartIndex<=((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>
jQuery Pagination分页插件使用方法
跟一般的jQuery插件一样，此插件使用也很简单便捷。方法是pagination，例如$("#page").pagination(100)
$("#Pagination").pagination(56, {
num_edge_entries: 2,
num_display_entries: 4,
callback: pageselectCallback,
items_per_page:1
})
先把查询出来的东西放入session对象，在当前页面读取出部分信息，为button按钮添加一个单击事件。查看详细信息也不一定非要在新页面，当前页面添加一个div，做成d出窗口的效果即可如$("#button1").click(function(){$("body").animate({$(this).append("<div style='background:#aaaposition:fixedleft:400pxtop:250pxwidth:400pxheight:300px'></div>")},500)这个是一个思路而已，div里面也可以放上其他html标签。d窗效果有了，然后再把内容添加到这个div就行了，也可以用jquery的jquery ui插件里面的dialog方法d窗。
，要是在新页面的话设定好样式，重新读取session内容即可。
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）