js实现前端分页页码管理

前端之家收集整理的这篇文章主要介绍了js实现前端分页页码管理前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

用JS实现前端分页页码管理,可以很美观的区分页显示(这也是参考大多数网站的分页页码展示),能够有很好的用户体验,这也是有业务需要就写了一下,还是新手,经验不足,欢迎指出批评!

首先先看效果图:

这是初始页面(也就是第一页)的界面,如果为第一页时,则首页上一页按钮不可用,为了展示分页效果,我当前的分页

一条一页

这是页码大于5页时展示的效果:1,2页始终始终显示(考虑到用户体验)

这是最后一页的效果图:

下面直接上js代码

页码显示 $(function(){ var dqPage = $("#dqPage").text();//得到当前页数 dqPage = parseInt(dqPage);//得到的文本转成int var pageCount = $("#pageCount").text();//得到总页数 pageCount = parseInt(pageCount); var i = 1; i = parseInt(i); var item=""; var href = "这里是请求地址"; if (pageCount <= 5 ) {//总页数小于五页,则加载所有页 for (i; i <= pageCount; i++) { if (i == dqPage) { item += ""+i+""; }else{ item += ""+i+""; } }; $('#pageBtn').append(item); return; }else if (pageCount > 5) {//总页数大于五页,则加载五页 if (dqPage < 5) {//当前页小于5,加载1-5页 for (i; i <= 5; i++) { if (i == dqPage) { item += ""+i+""; }else{ item += ""+i+""; } }; if (dqPage <= pageCount-2) {//最后一页追加“...”代表省略的页 item += " . . . "; } $('#pageBtn').append(item); return; }else if (dqPage >= 5) {//当前页大于5页 for (i; i <= 2; i++) {//1,2页码始终显示 item += ""+i+""; } item += " . . . ";//2页码后面用...代替部分未显示页码 if (dqPage+1 == pageCount) {//当前页+1等于总页码 for(i = dqPage-1; i <= pageCount; i++){//“...”后面跟三个页码当前页居中显示 if (i == dqPage) { item += ""+i+""; }else{ item += ""+i+""; } } }else if (dqPage == pageCount) {//当前页数等于总页数则是最后一页页码显示在最后 for(i = dqPage-2; i <= pageCount; i++){//...后面跟三个页码当前页居中显示 if (i == dqPage) { item += ""+i+""; }else{ item += ""+i+""; } } }else{//当前页小于总页数,则最后一页后面跟... for(i = dqPage-1; i <= dqPage+1; i++){//dqPage+1页后面... if (i == dqPage) { item += ""+i+""; }else{ item += ""+i+""; } } item += " . . . "; } $('#pageBtn').append(item); return; } } });

猜你在找的JavaScript相关文章