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 相关文章推荐
URI、URL和URN之间的区别与联系
Dec 20 Javascript
Prototype中dom对象方法汇总
Sep 17 Javascript
jQuery弹出层插件简化版代码下载
Oct 16 Javascript
Jquery Select操作方法集合脚本之家特别版
May 17 Javascript
Web前端设计模式  制作漂亮的弹出层
Oct 29 Javascript
JS OffsetParent属性深入解析
Jan 13 Javascript
简单理解vue中el、template、replace元素
Oct 27 Javascript
微信开发 js实现tabs选项卡效果
Oct 28 Javascript
javascript 动态生成css代码的两种方法
Mar 17 Javascript
jQuery插件FusionCharts实现的3D帕累托图效果示例【附demo源码】
Mar 25 jQuery
JS中call和apply函数用法实例分析
Jun 20 Javascript
JavaScript进制转换实现方法解析
Jan 18 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
DC宇宙的第一个英雄,堪称动漫史鼻祖,如今成为美国文化的象征
2020/04/09 欧美动漫
php正则
2006/07/07 PHP
PHP获取文件夹大小函数用法实例
2015/07/01 PHP
PHP的PDO大对象(LOBs)
2019/01/27 PHP
PHP simplexml_import_dom()函数讲解
2019/02/03 PHP
JavaScript初学者需要了解10个小技巧
2010/08/25 Javascript
onclick与listeners的执行先后问题详细解剖
2013/01/07 Javascript
js 获取浏览器版本以此来调整CSS的样式
2014/06/03 Javascript
JavaScript中的比较操作符&gt;、=、
2014/12/31 Javascript
jquery+css实现绚丽的横向二级下拉菜单-附源码下载
2015/08/23 Javascript
jQuery解析Json实例详解
2015/11/24 Javascript
JS给Array添加是否包含字符串的简单方法
2016/10/29 Javascript
JavaScript原生编写《飞机大战坦克》游戏完整实例
2017/01/04 Javascript
Canvas实现动态的雪花效果
2017/02/13 Javascript
浅谈vue中使用图片懒加载vue-lazyload插件详细指南
2017/10/23 Javascript
VUE中v-on:click事件中获取当前dom元素的代码
2018/08/22 Javascript
ES6 系列之 Generator 的自动执行的方法示例
2018/10/19 Javascript
微信小程序实现购物车代码实例详解
2019/08/29 Javascript
createObjectURL方法实现本地图片预览
2019/09/30 Javascript
Node.js学习之内置模块fs用法示例
2020/01/22 Javascript
vue 移动端记录页面浏览位置的方法
2020/03/11 Javascript
JavaScript或jQuery 获取option value值方法解析
2020/05/12 jQuery
[01:04:09]DOTA2-DPC中国联赛 正赛 iG vs VG BO3 第二场 2月2日
2021/03/11 DOTA
TensorFlow梯度求解tf.gradients实例
2020/02/04 Python
Python tkinter实现简单加法计算器代码实例
2020/05/13 Python
零基础小白多久能学会python
2020/06/22 Python
HTML5在canvas中绘制复杂形状附效果截图
2014/06/23 HTML / CSS
MCM英国官网:奢侈皮具制品
2017/04/18 全球购物
英国买鞋网站:Charles Clinkard
2019/11/14 全球购物
大学生职业生涯规划书的基本内容
2014/01/06 职场文书
手机被没收检讨书
2014/02/22 职场文书
小学德育工作经验交流材料
2014/05/22 职场文书
共产党员岗位承诺书
2014/05/29 职场文书
爱护公共设施演讲稿
2014/09/13 职场文书
2015年采购部工作总结
2015/04/23 职场文书
2016年“5.12”国际护士节活动总结
2016/04/06 职场文书