时间:2021-05-26
用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 += "<span class='disabled'>"+i+"</span>"; }else{ item += "<a href='"+href+i+"' >"+i+"</a>"; } }; $('#pageBtn').append(item); return; }else if (pageCount > 5) {//总页数大于五页,则加载五页 if (dqPage < 5) {//当前页小于5,加载1-5页 for (i; i <= 5; i++) { if (i == dqPage) { item += "<span class='disabled'>"+i+"</span>"; }else{ item += "<a href='"+href+i+"' >"+i+"</a>"; } }; if (dqPage <= pageCount-2) {//最后一页追加“...”代表省略的页 item += "<span> . . . </span>"; } $('#pageBtn').append(item); return; }else if (dqPage >= 5) {//当前页大于5页 for (i; i <= 2; i++) {//1,2页码始终显示 item += "<a href='"+href+i+"' >"+i+"</a>"; } item += "<span> . . . </span>";//2页码后面用...代替部分未显示的页码 if (dqPage+1 == pageCount) {//当前页+1等于总页码 for(i = dqPage-1; i <= pageCount; i++){//“...”后面跟三个页码当前页居中显示 if (i == dqPage) { item += "<span class='disabled'>"+i+"</span>"; }else{ item += "<a href='"+href+i+"' >"+i+"</a>"; } } }else if (dqPage == pageCount) {//当前页数等于总页数则是最后一页页码显示在最后 for(i = dqPage-2; i <= pageCount; i++){//...后面跟三个页码当前页居中显示 if (i == dqPage) { item += "<span class='disabled'>"+i+"</span>"; }else{ item += "<a href='"+href+i+"' >"+i+"</a>"; } } }else{//当前页小于总页数,则最后一页后面跟... for(i = dqPage-1; i <= dqPage+1; i++){//dqPage+1页后面... if (i == dqPage) { item += "<span class='disabled'>"+i+"</span>"; }else{ item += "<a href='"+href+i+"' >"+i+"</a>"; } } item += "<span> . . . </span>"; } $('#pageBtn').append(item); return; } } });<%-- 得到当前页--%><span id="dqPage" hidden="hidden" class="disabled1 current">${page}</span><%-- js控制的页码显示在这个div中--%><div id="pageBtn" style="width: auto;display:inline-block !important;height: auto;"></div>这是实现js控制页码显示的所有步骤,可能有点麻烦,后续会继续优化,当然现在网上也有很多分页插件,全凭个人喜好。
至于 “首页,上一页,下一页,末页,以及跳转页,这些就看各自的需求实现了(我是用el表达式控制的)”
以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持!
声明:本页内容来源网络,仅供用户参考;我单位不保证亦不表示资料全面及准确无误,也不保证亦不表示这些资料为最新信息,如因任何原因,本网内容或者用户因倚赖本网内容造成任何损失或损害,我单位将不会负任何法律责任。如涉及版权问题,请提交至online#300.cn邮箱联系删除。
分页页码显示算法复制代码代码如下:/***获取分页的HTML内容*@paraminteger$page当前页*@paraminteger$pages总页数*@p
本文实例讲述了tp5框架无刷新分页实现方法。分享给大家供大家参考,具体如下:已tp5分页为例,1.默认生成的分页页码如下:«12»2.点
最近做的一些小项目中,都有用到分页,需要自己去搞。就把整个分页实现整理下吧,方便自己也方便他人。前台1.引入paging.js//分页,页码导航,要求参数为一个
分页技术分为后端分页和前端分页。前端分页将数据一次性全部取出来,然后通过js进行分页,有其弊端:假设有商品表dbgoods,存放99999万条数据,执行查询语句
利用vue.js实现数据库分页,供大家参考,具体内容如下最新项目有一个分页功能,画面风格很简朴给的样图就用【1】表示页码了,因此,我没有上网上找插件,自己简单的