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 相关文章推荐
JavaScript Event学习第八章 事件的顺序
Feb 07 Javascript
教您去掉ie网页加载进度条的方法
Dec 09 Javascript
jQuery EasyUI API 中文文档 - EasyLoader 加载器
Sep 29 Javascript
Vue.js父与子组件之间传参示例
Feb 28 Javascript
JavaScript中最常见的三个面试题解析
Mar 04 Javascript
bootstrap datetimepicker 日期插件在火狐下出现一条报错信息的原因分析及解决办法
Mar 08 Javascript
微信小程序使用audio组件播放音乐功能示例【附源码下载】
Dec 08 Javascript
jQuery 获取除某指定对象外的其他对象 ( :not() 与.not())
Oct 10 jQuery
Node 代理访问的实现
Sep 19 Javascript
JS数据类型STRING使用实例解析
Dec 18 Javascript
JavaScript实现字符串与HTML格式相互转换
Mar 17 Javascript
VUE中鼠标滚轮使div左右滚动的方法详解
Dec 14 Vue.js
纯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 写文本日志实现代码
2010/05/18 PHP
PHP自动选择 连接本地还是远程数据库
2010/12/02 PHP
PHP运行出现Notice : Use of undefined constant 的完美解决方案分享
2012/03/05 PHP
PHP魔术方法之__call与__callStatic使用方法
2017/07/23 PHP
用window.location.href实现刷新另个框架页面
2007/03/07 Javascript
javascript 页面只自动刷新一次
2009/07/10 Javascript
Javascript在IE和FireFox中的不同表现简析
2012/12/03 Javascript
js为鼠标添加右击事件防止默认的右击菜单弹出
2013/07/29 Javascript
javascript实现完美拖拽效果
2015/05/06 Javascript
jquery实现多次上传同一张图片
2017/01/09 Javascript
详解vue.js之绑定class和style的示例代码
2017/08/24 Javascript
在 webpack 中使用 ECharts的实例详解
2018/02/05 Javascript
js实现购物车功能
2018/06/12 Javascript
深入解读Node.js中的koa源码
2019/06/17 Javascript
解决VUE项目使用Element-ui 下拉组件的验证失效问题
2020/11/07 Javascript
python装饰器初探(推荐)
2016/07/21 Python
python 类对象和实例对象动态添加方法(分享)
2017/12/31 Python
Python numpy实现二维数组和一维数组拼接的方法
2018/06/05 Python
Python Web编程之WSGI协议简介
2018/07/18 Python
使用python实现数组、链表、队列、栈的方法
2019/12/20 Python
解决Django中checkbox复选框的传值问题
2020/03/31 Python
Python脚本实现监听服务器的思路代码详解
2020/05/28 Python
Parts Express:音频、视频和扬声器的第一来源
2017/04/25 全球购物
环法自行车赛官方商店:Le Tour de France
2017/08/27 全球购物
乌克兰在线电子产品商店:MTA
2019/11/14 全球购物
西部世纪面试题
2014/12/05 面试题
营销与策划专业毕业生求职信
2013/11/01 职场文书
管理科学大学生求职信
2013/11/13 职场文书
毕业生找工作推荐信
2013/11/21 职场文书
办公室主任先进事迹
2014/01/18 职场文书
网络工程师专家职业发展路线
2014/02/14 职场文书
大学生简短的自我评价分享
2014/02/20 职场文书
董事长新年致辞
2015/07/29 职场文书
维护民族团结心得体会2016
2016/01/15 职场文书
《山中访友》教学反思
2016/02/24 职场文书
golang通过递归遍历生成树状结构的操作
2021/04/28 Golang