js实现前端分页页码管理


Posted in Javascript onJanuary 06, 2017

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

首先先看效果图:

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

js实现前端分页页码管理

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

js实现前端分页页码管理

这是最后一页的效果图:

js实现前端分页页码管理

下面直接上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表达式控制的)”

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持三水点靠木!

Javascript 相关文章推荐
jQuery 学习第七课 扩展jQuery的功能 插件开发
May 17 Javascript
createElement与createDocumentFragment的点点区别小结
Dec 19 Javascript
jQuery实现垂直半透明手风琴特效代码分享
Aug 21 Javascript
jquery无限级联下拉菜单简单实例演示
Nov 23 Javascript
[原创]javascript typeof id==='string'?document.getElementById(id):id解释
Nov 02 Javascript
使用Curl命令查看请求响应时间方法
Nov 04 Javascript
js实现图片旋转 js滚动鼠标中间对图片放大缩小
Jul 05 Javascript
手把手教你vue-cli单页到多页应用的方法
May 31 Javascript
详解swipe使用及竖屏页面滚动方法
Jun 28 Javascript
JavaScript惰性载入函数实例分析
Mar 27 Javascript
JavaScript常用内置对象用法分析
Jul 09 Javascript
微信小程序实现多选框功能的实例代码
Jun 24 Javascript
纯js实现倒计时功能
Jan 06 #Javascript
JS正则截取两个字符串之间及字符串前后内容的方法
Jan 06 #Javascript
微信小程序开发教程-手势解锁实例
Jan 06 #Javascript
jQuery ajax的功能实现方法详解
Jan 06 #Javascript
详解JS中定时器setInterval和setTImeout的this指向问题
Jan 06 #Javascript
Jqprint实现页面打印
Jan 06 #Javascript
JS使用正则截取两个字符串之间的字符串实现方法详解
Jan 06 #Javascript
You might like
在线竞拍系统的PHP实现框架(二)
2006/10/09 PHP
PHP中使用BigMap实例
2015/03/30 PHP
微信小程序 消息推送php服务器验证实例详解
2017/03/30 PHP
网页图片延时加载的js代码
2010/04/22 Javascript
js关闭模态窗口刷新父页面或跳转页面
2012/12/13 Javascript
jQuery插件MixItUp实现动画过滤和排序
2015/04/12 Javascript
windows下安装nodejs及框架express
2015/08/07 NodeJs
JavaScript获取各大浏览器信息图示
2015/11/20 Javascript
Bootstrap CSS布局之按钮
2016/12/17 Javascript
javascript稀疏数组(sparse array)和密集数组用法分析
2016/12/28 Javascript
利用Javascript实现简单的转盘抽奖
2017/02/13 Javascript
结合Vue控制字符和字节的显示个数的示例
2018/05/17 Javascript
js中获取URL参数的共用方法getRequest()方法实例详解
2018/10/24 Javascript
vue项目中使用vue-i18n报错的解决方法
2019/01/13 Javascript
JS实现的全选、全不选及反选功能【案例】
2019/02/19 Javascript
Python实现利用最大公约数求三个正整数的最小公倍数示例
2017/09/30 Python
Anaconda下安装mysql-python的包实例
2018/06/11 Python
详解python调用cmd命令三种方法
2019/07/08 Python
Python实现Selenium自动化Page模式
2019/07/14 Python
Python进阶之使用selenium爬取淘宝商品信息功能示例
2019/09/16 Python
Python Unittest原理及基本使用方法
2020/11/06 Python
html5中去掉input type date默认样式的方法
2018/09/06 HTML / CSS
农行实习自我鉴定
2013/09/22 职场文书
团员的自我评价
2013/12/01 职场文书
公务员转正考察材料
2014/02/07 职场文书
医学院毕业生自荐信范文
2014/03/06 职场文书
打造高效课堂实施方案
2014/03/22 职场文书
书法大赛策划方案
2014/06/04 职场文书
改进作风怎么办发言材料
2014/08/17 职场文书
安全标兵事迹材料
2014/08/17 职场文书
争先创优活动总结
2014/08/27 职场文书
财务个人年度总结范文
2015/02/26 职场文书
2016党性教育学习心得体会
2016/01/21 职场文书
CocosCreator入门教程之网络通信
2021/04/16 Javascript
pytorch中的model=model.to(device)使用说明
2021/05/24 Python
Python中三种花式打印的示例详解
2022/03/19 Python