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 相关文章推荐
js 深拷贝函数
Dec 04 Javascript
javascript eval函数深入认识
Feb 21 Javascript
获取HTML DOM节点元素的方法的总结
Aug 21 Javascript
javaScript arguments 对象使用介绍
Oct 18 Javascript
JS小功能(button选择颜色)简单实例
Nov 29 Javascript
详解Angular2学习笔记之Html属性绑定
Jan 03 Javascript
基于VUE移动音乐WEBAPP跨域请求失败的解决方法
Jan 16 Javascript
vue内置指令详解
Apr 03 Javascript
jQuery实现鼠标滑过商品小图片上显示对应大图片功能【测试可用】
Apr 27 jQuery
关于React动态加载路由处理的相关问题
Jan 07 Javascript
vue计算属性无法监听到数组内部变化的解决方案
Nov 06 Javascript
解决iview table组件里的 固定列 表格不自适应的问题
Nov 13 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
PHP 递归效率分析
2009/11/24 PHP
实用PHP会员权限控制实现原理分析
2011/05/29 PHP
PHP以及MYSQL日期比较方法
2012/11/29 PHP
php根据日期或时间戳获取星座信息和生肖等信息
2015/10/20 PHP
Symfony2 session用法实例分析
2016/02/04 PHP
Bootstrap弹出框(modal)垂直居中的问题及解决方案详解
2016/06/12 Javascript
Spring MVC中Ajax实现二级联动的简单实例
2016/07/06 Javascript
Vue表单实例代码
2016/09/05 Javascript
轻松理解vue的双向数据绑定问题
2017/10/30 Javascript
JS+Canvas绘制动态时钟效果
2017/11/10 Javascript
layui.js实现的表单验证功能示例
2017/11/15 Javascript
浅析js中mvvm模式实现的原理
2018/10/06 Javascript
vue+egg+jwt实现登录验证的示例代码
2019/05/18 Javascript
React中使用外部样式的3种方式(小结)
2019/05/28 Javascript
vue设置动态请求地址的例子
2019/11/01 Javascript
微信小程序接入腾讯云验证码的方法步骤
2020/01/07 Javascript
Node.js API详解之 vm模块用法实例分析
2020/05/27 Javascript
[04:44]DOTA2英雄梦之声_第12期_矮人直升机
2014/06/21 DOTA
[02:17]TI4西雅图DOTA2前线报道 啸天mik夫妻档解说
2014/07/08 DOTA
教你安装python Django(图文)
2013/11/04 Python
Python BeautifulSoup中文乱码问题的2种解决方法
2014/04/22 Python
python数据类型_元组、字典常用操作方法(介绍)
2017/05/30 Python
python 垃圾收集机制的实例详解
2017/08/20 Python
利用Python+阿里云实现DDNS动态域名解析的方法
2019/04/01 Python
Python 变量的创建过程详解
2019/09/02 Python
Python远程开发环境部署与调试过程图解
2019/12/09 Python
市场营销专业个人自荐信格式
2013/09/21 职场文书
应届大学生求职信
2013/12/01 职场文书
供应链金融服务方案
2014/05/25 职场文书
2014财产信托协议书范本
2014/11/18 职场文书
2015年学校党支部工作总结
2015/04/01 职场文书
感恩教育观后感
2015/06/17 职场文书
告诉你一个秘密:富人致富的五大优点
2019/07/11 职场文书
导游词之新疆尼雅遗址
2019/10/16 职场文书
python批量更改目录名/文件名的方法
2021/04/18 Python
windows安装python超详细图文教程
2021/05/21 Python