JS实现前端动态分页码代码实例


Posted in Javascript onJune 02, 2020

思路分析:有3种情况

第一种情况,当前页面curPage < 4

JS实现前端动态分页码代码实例

第二种情况,当前页面curPage == 4

JS实现前端动态分页码代码实例

第三种情况,当前页面curPage>4

JS实现前端动态分页码代码实例

此外,还要考虑,当前页码 curPage < pageTotal(总页码)-2,才显示 ...

首先,先是前端的布局样式

<body>
   /*首先,在body中添加div id="pagination" */
   <div id="pagination">
<!-- 后面会在JS中动态追加 ,此处为了,实现前端效果,所以注册
<a id="prevBtn"><</a>
<a id="first">1</a>
<a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >2</a>
<a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >3</a>
<a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >4</a>
<span>...</span>
<a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" id="last">10</a>
<a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" id="nextBtn">></a>
-->

   </div>
</body>

其次,是css代码

*{
      margin: 0;
      padding: 0;
    }
    #pagination{
      width: 500px;
      height: 100px;
      border: 2px solid crimson;
      
      margin: 50px auto ;
      padding-top: 50px ;
      padding-left: 50px;
    }
    
    .over,.pageItem{
      float: left;
      display: block;
      width: 35px;
      height: 35px;
      line-height: 35px;
      text-align: center;
    }
    
    .pageItem{
      border: 1px solid orangered;
      text-decoration: none;
      color: dimgrey;
      margin-right: -1px;/*解决边框加粗问题*/
    }
    .pageItem:hover{
      background-color: #f98e4594;
      color:orangered ;
    }
    .clearfix{
      clear: both;
    }
    .active{
      background-color: #f98e4594;
      color:orangered ;
    }
    .banBtn{
      border:1px solid #ff980069;
      color: #ff980069;
    }
    #prevBtn{
      margin-right: 10px;
    }
    #nextBtn{
      margin-left: 10px;
    }

JavaScript代码

<script type="text/javascript">
  
  var pageOptions = {pageTotal:10,curPage:7,paginationId:''};
  dynamicPagingFunc(pageOptions);
  
  function dynamicPagingFunc(pageOptions){
    var pageTotal = pageOptions.pageTotal || 1;
    var curPage = pageOptions.curPage||1;
    var doc = document;
    var paginationId = doc.getElementById(''+pageOptions.paginationId+'') || doc.getElementById('pagination');
    var html = '';
    if(curPage>pageTotal){
      curPage =1;
    }
    /*总页数小于5,全部显示*/
    if(pageTotal<=5){
      html = appendItem(pageTotal,curPage,html);
      paginationId.innerHTML = html;
    }
    /*总页数大于5时,要分析当前页*/
    if(pageTotal>5){
      if(curPage<=4){
        html = appendItem(pageTotal,curPage,html);
        paginationId.innerHTML = html;
      }else if(curPage>4){
        html = appendItem(pageTotal,curPage,html);
        paginationId.innerHTML = html;
      }
    }
  }
  
  function appendItem(pageTotal,curPage,html){
    var starPage = 0;
    var endPage = 0;
    
    html+='<a id="prevBtn"><</a>';
    
    if(pageTotal<=5){
      starPage = 1;
      endPage = pageTotal;  
    }else if(pageTotal>5 && curPage<=4){
      starPage = 1;
      endPage = 4;
      if(curPage==4){
        endPage = 5;
      }
    }else{
      if(pageTotal==curPage){
        starPage = curPage-3;
        endPage = curPage;
      }else{
        starPage = curPage-2;
        endPage = curPage+1;
      }
      html += '<a id="first">1</a><span>...</span>';
    }
    
    for(let i = starPage;i <= endPage;i++){
      if(i==curPage){
        html += '<a id="first">'+i+'</a>';
      }else{
        html += '<a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >'+i+'</a>';
      }
    }
    
    if(pageTotal<=5){
      html+='<a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" id="nextBtn">></a>';
    }else{
      if(curPage<pageTotal-2){ 
        html += '<span>...</span>';
      }
      if(curPage<=pageTotal-2){
        html += '<a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >'+pageTotal+'</a>';
      }
      html+='<a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" id="nextBtn">></a>';
    }
    return html;
  }
  
</script>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jquery实现很酷的网页顶部图标下拉菜单效果
Aug 22 Javascript
Bootstrap 粘页脚效果
Mar 28 Javascript
angular实现商品筛选功能
Feb 01 Javascript
走进javascript——不起眼的基础,值和分号
Feb 24 Javascript
Vue 滚动行为的具体使用方法
Sep 13 Javascript
使用svg实现动态时钟效果
Jul 17 Javascript
Vue 中axios配置实例详解
Jul 27 Javascript
JavaScript实现多态和继承的封装操作示例
Aug 20 Javascript
Vuex的actions属性的具体使用
Apr 14 Javascript
浅谈javascript错误处理
Aug 11 Javascript
Jquery属性的获取/设置及样式添加/删除操作技巧分析
Dec 23 jQuery
Vue 同步异步存值取值实现案例
Aug 05 Javascript
在Vue中创建可重用的 Transition的方法
Jun 02 #Javascript
jQuery+Ajax+js实现请求json格式数据并渲染到html页面操作示例
Jun 02 #jQuery
2020淘宝618理想生活列车自动领喵币js脚本的代码
Jun 02 #Javascript
JavaScript实现手机号码 3-4-4格式并控制新增和删除时光标的位置
Jun 02 #Javascript
2020京东618叠蛋糕js脚本(亲测好用)
Jun 02 #Javascript
vue项目在webpack2实现移动端字体自适配功能
Jun 02 #Javascript
React实现类似淘宝tab居中切换效果的示例代码
Jun 02 #Javascript
You might like
探讨多键值cookie(php中cookie存取数组)的详解
2013/06/06 PHP
php与阿里云短信接口接入操作案例分析
2020/05/27 PHP
如何用JavaScript动态呼叫函数(两种方式)
2013/05/03 Javascript
JQuery操作三大控件(下拉,单选,复选)的方法
2013/08/06 Javascript
Jquery 过滤器(first,last,not,even,odd)的使用
2014/01/22 Javascript
js中实现多态采用和继承类似的方法
2014/08/22 Javascript
12个超实用的JQuery代码片段
2015/11/02 Javascript
使用jquery.qrcode.min.js实现中文转化二维码
2016/03/11 Javascript
jQuery的promise与deferred对象在异步回调中的作用
2016/05/03 Javascript
JavaScript程序中实现继承特性的方式总结
2016/06/24 Javascript
JavaScript实现简单的日历效果
2016/09/25 Javascript
Vue.js组件tree实现省市多级联动
2016/12/02 Javascript
JS编写函数实现对身份证号码最后一位的验证功能
2016/12/29 Javascript
JavaScript基本类型值-Undefined、Null、Boolean
2017/02/23 Javascript
JS动态插入脚本和插入引用外部链接脚本的方法
2018/05/21 Javascript
vue页面切换过渡transition效果
2018/10/08 Javascript
微信小程序中插入激励视频广告并获取收益(实例代码)
2019/12/06 Javascript
[01:32]DOTA2上海特锦赛现场采访:最想COS的英雄
2016/03/25 DOTA
磁盘垃圾文件清理器python代码实现
2020/08/24 Python
Django1.11配合uni-app发起微信支付的实现
2019/10/12 Python
pycharm双击无响应(打不开问题解决办法)
2020/01/10 Python
你可能不知道的Python 技巧小结
2020/01/29 Python
解决PyCharm不在run输出运行结果而不是再Console里输出的问题
2020/09/21 Python
html5触摸事件判断滑动方向的实现
2018/06/05 HTML / CSS
HTML5 Video/Audio播放本地文件示例介绍
2013/11/18 HTML / CSS
美国女孩洋娃娃店:American Girl
2017/10/24 全球购物
一个J2EE项目团队的主要人员组成是什么
2012/06/04 面试题
教师对学生的寄语
2014/04/03 职场文书
暑期教师培训方案
2014/06/07 职场文书
活动总结模板大全
2015/05/11 职场文书
关于运动会的广播稿
2015/08/19 职场文书
微软PC Health Check电脑健康状况检查应用下载(Win11配置检测工具)
2021/06/26 数码科技
嵌入式Redis服务器在Spring Boot测试中的使用教程
2021/07/21 Redis
python基础之错误和异常处理
2021/10/24 Python
Python+腾讯云服务器实现每日自动健康打卡
2021/12/06 Python
Golang MatrixOne使用介绍和汇编语法
2022/04/19 Golang