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 相关文章推荐
用javascript实现点击链接弹出&quot;图片另存为&quot;而不是直接打开
Aug 15 Javascript
jquery实现用户打分评分特效
May 28 Javascript
js获取及修改网页背景色和字体色的方法
Dec 29 Javascript
Bootstrap中文本框的宽度变窄并且加入一副验证码图片的实现方法
Jun 23 Javascript
bootstrap multiselect 多选功能实现方法
Jun 05 Javascript
vue select二级联动第二级默认选中第一个option值的实例
Jan 10 Javascript
Servlet3.0与纯javascript通过Ajax交互的实例详解
Mar 18 Javascript
Node.js Buffer用法解读
May 18 Javascript
layui从数据库中获取复选框的值并默认选中方法
Aug 15 Javascript
详解Vue iview IE浏览器不兼容报错(Iview Bable polyfill)
Jan 07 Javascript
JS用最简单的方法实现四舍五入
Aug 27 Javascript
vue form表单post请求结合Servlet实现文件上传功能
Jan 22 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
shopex中集成的站长统计功能的代码简单分析
2011/08/11 PHP
thinkPHP连接sqlite3数据库的实现方法(附Thinkphp代码生成器下载)
2016/05/27 PHP
PHP简单实现正则匹配省市区的方法
2018/04/13 PHP
纯js实现瀑布流展现照片(自动适应窗口大小)
2013/04/08 Javascript
百度地图自定义控件分享
2015/03/04 Javascript
JavaScript实现点击单选按钮改变输入框中文本域内容的方法
2015/08/12 Javascript
浅谈JavaScript中的对象及Promise对象的实现
2015/11/15 Javascript
简介AngularJS中$http服务的用法
2016/02/06 Javascript
基于Bootstrap重置输入框内容按钮插件
2016/05/12 Javascript
H5移动端适配 Flexible方案
2016/10/24 Javascript
可输入文字查找ajax下拉框控件 ComBox的实现方法
2016/10/25 Javascript
JavaScript正则表达式exec/g实现多次循环用法示例
2017/01/17 Javascript
JS完成画圆圈的小球
2017/03/07 Javascript
Vue.js 中的 $watch使用方法
2017/05/25 Javascript
Vue.js 单页面多路由区域操作的实例详解
2017/07/17 Javascript
VueJs监听window.resize方法示例
2018/01/17 Javascript
教你完全理解ReentrantLock重入锁
2019/06/03 Javascript
vue 实现根据data中的属性值来设置不同的样式
2020/08/04 Javascript
python生成器的使用方法
2013/11/21 Python
用python实现的线程池实例代码
2018/01/06 Python
python TCP Socket的粘包和分包的处理详解
2018/02/09 Python
python验证码识别教程之灰度处理、二值化、降噪与tesserocr识别
2018/06/04 Python
python逆序打印各位数字的方法
2018/06/25 Python
Python读取excel指定列生成指定sql脚本的方法
2018/11/28 Python
selenium+python自动化测试之环境搭建
2019/01/23 Python
python实现栅栏加解密 支持密钥加密
2019/03/20 Python
wxPython窗体拆分布局基础组件
2019/11/19 Python
解决Tensorboard 不显示计算图graph的问题
2020/02/15 Python
Python基础教程(一)——Windows搭建开发Python开发环境
2020/07/20 Python
python实现梯度下降算法的实例详解
2020/08/17 Python
全球酒店比价网:HotelsCombined
2017/06/20 全球购物
Solaris操作系统的线程机制
2015/07/28 面试题
英语求职信范文
2014/05/23 职场文书
红歌会主持词
2015/07/02 职场文书
2019交通安全宣传标语集锦!
2019/06/28 职场文书
Java基础-封装和继承
2021/07/02 Java/Android