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的tab切换效果代码[代码分离]
Apr 11 Javascript
jQuery入门介绍之基础知识
Jan 13 Javascript
深入理解JavaScript系列(45):代码复用模式(避免篇)详解
Mar 04 Javascript
Js的Array数组对象详解
Feb 22 Javascript
Node.js+Express配置入门教程详解
May 19 Javascript
ashx文件获取$.ajax()方法发送的数据
May 26 Javascript
Node.js  REPL (交互式解释器)实例详解
Aug 06 Javascript
基于 D3.js 绘制动态进度条的实例详解
Feb 26 Javascript
js实现手表表盘时钟与圆周运动
Sep 18 Javascript
微信小程序对图片进行canvas压缩的方法示例详解
Nov 12 Javascript
GitHub上77.9K的Axios项目有哪些值得借鉴的地方详析
Jun 15 Javascript
Vue监视数据的原理详解
Feb 24 Vue.js
在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中限制ip段访问、禁止ip提交表单的代码分享
2014/08/22 PHP
浅谈PHP解析URL函数parse_url和parse_str
2014/11/11 PHP
php文件缓存类汇总
2014/11/21 PHP
php+ajax登录跳转登录实现思路
2016/07/31 PHP
thinkPHP模板引擎用法示例
2016/12/08 PHP
PHP工厂模式的日常使用
2019/03/20 PHP
JavaScript 内置对象属性及方法集合
2010/07/04 Javascript
JQuery-tableDnD 拖拽的基本使用介绍
2013/07/04 Javascript
JS绘制生成花瓣效果的方法
2015/08/05 Javascript
javascript验证内容为数字以及长度为10的简单实例
2016/08/20 Javascript
浅谈jquery的html方法里包含特殊字符的处理
2016/11/30 Javascript
vue+ElementUI实现订单页动态添加产品数据效果实例代码
2017/07/13 Javascript
es6中的解构赋值、扩展运算符和rest参数使用详解
2017/09/28 Javascript
vue 音乐App QQ音乐搜索列表最新接口跨域设置方法
2018/09/25 Javascript
react实现antd线上主题动态切换功能
2019/08/12 Javascript
jQuery实现容器间的元素拖拽功能
2020/12/01 jQuery
Python中实现对Timestamp和Datetime及UTC时间之间的转换
2015/04/08 Python
python使用range函数计算一组数和的方法
2015/05/07 Python
python简单的函数定义和用法实例
2015/05/07 Python
python框架django基础指南
2016/09/08 Python
python+tkinter编写电脑桌面放大镜程序实例代码
2018/01/16 Python
一道python走迷宫算法题
2018/01/22 Python
tensorflow saver 保存和恢复指定 tensor的实例讲解
2018/07/26 Python
pygame实现简易飞机大战
2018/09/11 Python
Tensorflow中k.gradients()和tf.stop_gradient()用法说明
2020/06/10 Python
Python实现区域填充的示例代码
2021/02/03 Python
ALDI奥乐齐官方海外旗舰店:德国百年超市
2017/12/27 全球购物
商务日语专业毕业生求职信
2013/10/26 职场文书
酒店前台接待岗位职责
2013/12/03 职场文书
挂科检讨书范文
2014/02/20 职场文书
中学生英语演讲稿
2014/04/26 职场文书
先进学校事迹材料
2014/12/30 职场文书
2015年全国“爱牙日”宣传活动总结
2015/03/23 职场文书
2015年安全生产月活动总结
2015/03/26 职场文书
工作调动申请报告
2015/05/18 职场文书
AngularJS实现多级下拉框
2022/03/25 Javascript