js实现前端分页页码管理

用JS实现前端分页页面管理，可以把页码显示区分得很漂亮(这也是指大多数网站的分页页码显示)，可以有很好的用户体验，也是有业务需要的时候写的，但还是新手，没有经验，请指出批评！

先看效果图：

这是初始页面(即第一页)的界面。如果是第一页，则第一页和上一页的按钮不可用。为了显示分页的效果，我当前的分页是一次一页。

这是页码大于5页时的效果：总是显示1页和2页(考虑用户体验)

这是最后一页的渲染图：

下面直接介绍js代码：

//页码显示$(function(){ var dqpage=$(' # dqpage ')。text()；//获取当前页码dq page=parseInt(dq page)；//获得的文本转换为int var pagecount=$ ('# pagecount ')。text()；//获取总页数page count=Parseint(page count)；var I=1；I=ParSeint(I)；var item=Var href='这是请求的地址'；如果(页数=5) {//如果总页数少于5页，则加载(I；i=页数；I){ if(I==DqPage){ item=' span class=' disabled ' ' I '/span '；} else { item=' a href=' href I ' ' ' I '/a '；} };$('#pageBtn ')。追加(项)；返回；}else if (pageCount 5) {//如果总页数大于5页，则加载5页if (dqPage 5) {//如果当前页小于5页，则为(I)加载1-5页；I=5；I){ if(I==DqPage){ item=' span class=' disabled ' ' I '/span '；} else { item=' a href=' href I ' ' ' I '/a '；} };if(dqPage=page count-2){///. "被添加到最后一页，以表示省略的页面项='span./span '；} $('#pageBtn ')。追加(项)；返回；}else if (dqPage=5) {//当前页面大于(I；I=2；I) {//1，2页码始终显示item=' a href=' href I ' ' I '/a '；} item='span。/span '；//2将部分页码替换为.{//当前第1页等于(I=dqPage-1；i=页数；我){///……”后跟三个页码，当前页面显示if(I==dqpage){ item=' span class=' disabled ' ' I '/span '；} else { item=' a href=' href I ' ' ' I '/a '；} } } else if(dq page==page count){//如果当前页码等于总页码，则最后一个页码显示在最后一个for(I=dq page-2；i=页数；I ){//.如果(I==dq page){ item=' span class=' disabled ' ' I '/span }，当前页面将显示在中间，并带有三个页码；} else { item=' a href=' href I ' ' ' I '/a '；}} }else{//如果当前页面少于总页数，则最后一页后面跟着.for(I=DqPage-1；I=DqPage 1；I){//在dqpage1页之后.if(I==dq page){ item=' span class=' disabled ' ' I '/span '；} else { item=' a href=' href I ' ' ' I '/a '；} } item='span。/span '；} $('#pageBtn ')。追加(项)；返回；} } });%-获取当前页面-% span id=' dq page ' hidden=' hidden ' class=' disable 1 current ' $ { page }/span %-由js控制的页码显示在此div中-% div id=' pageb TN ' style=' width : auto；display:inline-block！重要；' height: auto'/div这是实现页码显示js控制的全部步骤，可能有点麻烦，以后会继续优化。当然，现在互联网上有很多分页插件，这取决于个人喜好。

至于“第一页、上一页、下一页、最后一页和跳转页，这取决于它们各自的要求(我使用el expression control)”

以上就是本文的全部内容。希望本文的内容能给大家的学习或工作带来一些帮助，也希望多多支持我们！