计算开始显示的行数,和最后显示的行数
遍历显示数据实现分页
实现最下方的显示,第几页,上一页,下一页
当前页为第一页时,上一页没有点击事件
当前页为最后一页时,下一页没有点击事件
否则,上一页和下一页均可使用,点击某一页会跳转到那一页
到此,分页效果已经实现了。
<script language="javascript">var obj,j
var page=0
var nowPage=0//当前页
var listNum=6//每页显示<ul>数
var PagesLen//总页数
var PageNum=4//分页链接接数(5个)
onload=function(){
obj=document.getElementById("mydiv").getElementsByTagName("li")
j=obj.length
PagesLen=Math.ceil(j/listNum)
upPage(0)
}
function upPage(p){
nowPage=p
//内容变换
for (var i=0i<ji++){
obj[i].style.display="none"
}
for (var i=p*listNumi<(p+1)*listNumi++){
if(obj[i])obj[i].style.display="block"
}
//分页链接变换
sliS='<a href="###" onclick="upPage(0)">首页</a> '
if(nowPage>0) //***如果不是第一页,则显示上一页
sliS+='<a href="###" onclick="upPage('+(nowPage-1)+')">上一页</a>'
var PageNum_2=PageNum%2==0?Math.ceil(PageNum/2)+1:Math.ceil(PageNum/2)
var PageNum_3=PageNum%2==0?Math.ceil(PageNum/2):Math.ceil(PageNum/2)+1
var sliC="",startPage,endPage
if (PageNum>=PagesLen) {startPage=0endPage=PagesLen-1}
else if (nowPage<PageNum_2){startPage=0endPage=PagesLen-1>PageNum?PageNum:PagesLen-1}//首页
else {startPage=nowPage+PageNum_3>=PagesLen?PagesLen-PageNum-1: nowPage-PageNum_2+1var t=startPage+PageNumendPage=t>PagesLen?PagesLen-1:t}
for (var i=startPagei<=endPagei++){
if (i==nowPage)sliC+='<a href="###" style="color:redfont-weight:700" onclick="upPage('+i+')">'+(i+1)+'</a> '
else sliC+='<a href="###" onclick="upPage('+i+')">'+(i+1)+'</a> '
}
if(nowPage<(PagesLen-1)) //****如果不是最后一页,显示下一页
sliS+='<a href="###" onclick="upPage('+(nowPage+1)+')">下一页</a>'
sliE=' <a href="###" onclick="upPage('+(PagesLen-1)+')">尾页</a> '
sliE2=nowPage+1+"/"+PagesLen+"页"+" 共"+j+"条"
document.getElementById("changpage").innerHTML=sliS+sliC+sliE+sliE2
}
欢迎分享,转载请注明来源:内存溢出
评论列表(0条)