js实现分页

js实现分页,第1张

然后计算出一共分为几页

计算开始显示的行数,和最后显示的行数

遍历显示数据实现分页

实现最下方的显示,第几页,上一页,下一页

当前页为第一页时,上一页没有点击事件

当前页为最后一页时,下一页没有点击事件

否则,上一页和下一页均可使用,点击某一页会跳转到那一页

到此,分页效果已经实现了。

<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

}


欢迎分享,转载请注明来源:内存溢出

原文地址: https://outofmemory.cn/bake/11744643.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023-05-18
下一篇 2023-05-18

发表评论

登录后才能评论

评论列表(0条)

保存