首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

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>

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

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

- Author -

javascript痴痴

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
prettify 代码高亮着色器google出品
Dec 28 Javascript
如何确保JavaScript的执行顺序 之jQuery.html深度分析
Mar 03 Javascript
jQuery实现定时读取分析xml文件的方法
Jul 16 Javascript
学习jQuey中的return false
Dec 18 Javascript
微信小程序 swiper组件详解及实例代码
Oct 25 Javascript
AngularJS创建自定义指令的方法详解
Nov 03 Javascript
实现div内部滚动条滚动到底部和顶部的代码
Nov 15 Javascript
JavaScript中常见内置函数用法示例
May 14 Javascript
JS实现的贪吃蛇游戏完整实例
Jan 18 Javascript
微信小程序全局变量功能与用法详解
Jan 22 Javascript
教你完全理解ReentrantLock重入锁
Jun 03 Javascript
js 计算月/周的第一天和最后一天代码
Feb 01 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
自我评价(886) 岗位职责(1324) Ruby面试题(15) 自荐信(981) SOA面试题(9) 求职信(1029) J2EE面试题(19) Delphi面试题(13) 推荐信(292) 自我鉴定(671)
You might like
使用Limit参数优化MySQL查询的方法
2008/11/12 PHP
浅谈PHP的$_SERVER[SERVER_NAME]
2017/02/04 PHP
PHP5.0~5.6 各版本兼容性cURL文件上传功能实例分析
2018/05/11 PHP
php 中self,this的区别和操作方法实例分析
2019/11/04 PHP
jquery的颜色选择插件实例代码
2008/10/02 Javascript
28个JS验证函数收集
2010/03/02 Javascript
Jquery Ajax学习实例3 向WebService发出请求，调用方法返回数据
2010/03/16 Javascript
基于jQuery的表格操作插件
2010/04/22 Javascript
javascript 模式设计之工厂模式详细说明
2010/05/10 Javascript
各浏览器对click方法的支持差异小结
2011/07/31 Javascript
gridpanel动态加载数据的实例代码
2013/07/18 Javascript
javascript实现des解密加密全过程
2014/04/03 Javascript
JavaScript每天定时更换皮肤样式的方法
2015/07/01 Javascript
Vuex之理解Store的用法
2017/04/19 Javascript
vue axios请求拦截实例代码
2018/03/29 Javascript
vue.js项目nginx部署教程
2018/04/05 Javascript
微信小程序实现swiper切换卡内嵌滚动条不显示的方法示例
2018/12/20 Javascript
vue项目中常见问题及解决方案(推荐)
2019/10/21 Javascript
微信内置开发 iOS修改键盘换行为搜索的解决方案
2019/11/06 Javascript
详解Vue中的Props与Data细微差别
2020/03/02 Javascript
解决Vue-cli3没有vue.config.js文件夹及配置vue项目域名的问题
2020/12/04 Vue.js
利用Python中的mock库对Python代码进行模拟测试
2015/04/16 Python
Python代码打开本地.mp4格式文件的方法
2019/01/03 Python
python3+PyQt5 实现Rich文本的行编辑方法
2019/06/17 Python
python实现基于朴素贝叶斯的垃圾分类算法
2019/07/09 Python
python批量修改ssh密码的实现
2019/08/08 Python
Python 类属性与实例属性，类对象与实例对象用法分析
2019/09/20 Python
pytorch 实现打印模型的参数值
2019/12/30 Python
Anaconda＋vscode＋pytorch环境搭建过程详解
2020/05/25 Python
详解pandas中利用DataFrame对象的.loc[]、.iloc[]方法抽取数据
2020/12/13 Python
详解利用canvas实现环形进度条的方法
2019/06/12 HTML / CSS
Why we need EJB
2016/10/20 面试题
董事长岗位职责
2013/11/30 职场文书
委托培训协议书
2014/11/17 职场文书
农贸批发市场管理制度
2015/08/07 职场文书
2016年大学生社区服务活动总结
2016/04/06 职场文书