思路分析：有3种情况

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

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

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

此外，还要考虑，当前页码 curPage < pageTotal（总页码）-2，才显示 ...

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

<body>

      /*首先，在body中添加div id="pagination" */

      <div id="pagination">

<!-- 后面会在JS中动态追加 ，此处为了，实现前端效果，所以注册
<a class="banBtn pageItem" id="prevBtn">&lt;</a>
<a class="active pageItem" id="first">1</a>
<a href="#" class="pageItem">2</a>
<a href="#" class="pageItem">3</a>
<a href="#" class="pageItem">4</a>
<span class="over">...</span>
<a href="#" class="pageItem" id="last">10</a>
<a href="#" class="pageItem" id="nextBtn">&gt;</a>
-->

      </div>
</body>

其次，是css代码

*{

            margin:;

            padding:;

        }

        #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 class="pageItem" id="prevBtn">&lt;</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 class="pageItem" id="first">1</a><span class="over">...</span>';

        }

        for(let i = starPage;i <= endPage;i++){

            if(i==curPage){

                html += '<a class="active pageItem" id="first">'+i+'</a>';

            }else{

                html += '<a href="#" class="pageItem">'+i+'</a>';

            }

        }

        if(pageTotal<=5){

            html+='<a href="#" class="pageItem" id="nextBtn">&gt;</a>';

        }else{

            if(curPage<pageTotal-2){

                html += '<span class="over">...</span>';

            }

            if(curPage<=pageTotal-2){

                html += '<a href="#" class="pageItem">'+pageTotal+'</a>';

            }

            html+='<a href="#" class="pageItem" id="nextBtn">&gt;</a>';

        }

        return html;

    }

</script>

纯JS实现前端动态分页码的更多相关文章

  1. js实现前端动态筛选表格内容

    代码参考: http://www.sharejs.com/codes/javascript/4289 http://www.jb51.net/article/103420.htm https://ww ...

  2. 纯js遍历json获取值动态为select添加option

    遍历json数组 并动态为select添加option 直接上代码,重要部分有注解 <!DOCTYPE html> <html lang="en"> < ...

  3. 纯JS前端分页方法（JS分页）

    1.JS分页函数:开发过程中,分页功能一般是后台提供接口,前端只要传page(当前页码)和pageSize(每页最大显示条数)及对应的其他查询条件,就可以返回所需分页显示的数据. 但是有时也需要前端本 ...

  4. js实现前端分页页码管理

    用JS实现前端分页页码管理,可以很美观的区分页码显示(这也是参考大多数网站的分页页码展示),能够有很好的用户体验,这也是有业务需要就写了一下,还是新手,经验不足,欢迎指出批评! 首先先看效果图: 这是 ...

  5. 纯js实现瀑布流布局及ajax动态新增数据

    本文用纯js代码手写一个瀑布流网页效果,初步实现一个基本的瀑布流布局,以及滚动到底部后模拟ajax数据加载新图片功能. 缺点: 1. 程序不是响应式,不能实时调整页面宽度: 2. 程序中当新增ajax ...

  6. 纯js手动分页

    昨天让做个页面,后台提供所有数据,没有做好分页,需要前端js手动分页. 我参考了 http://www.cnblogs.com/jiechn/p/4095029.html 做了些许改动让分页效果更加完 ...

  7. JS高级前端开发群加群说明及如何晋级

    JS高级前端开发群加群说明 一.文章背景: 二. 高级群: 三. 加入方式: 四. 说明:   一.文章背景: 去年年初建了几个群,在不经意间火了,一直排在“前端开发”关键字搜索结果第一名.当然取得这 ...

  8. 前端进阶试题css（来自js高级前端开发---豪情）既然被发现了HOHO，那我就置顶了嘿嘿！觉得自己技术OK的可以把这套题目做完哦，然后加入高级前端的社区咯

    http://www.cnblogs.com/jikey/p/4426105.html js高级前端开发加群方法(此群很难进,里面纯技术,严禁广告,水群) 完整题目做完发邮箱(jikeytang@16 ...

  9. 纯js分页代码(简洁实用)

    纯js写的分页代码. 复制代码代码如下: //每页显示字数 PageSize=5000; //分页模式 flag=2;//1:根据字数自动分页 2:根据[NextPage]分页 //默认页 start ...

随机推荐

  1. Android 触发Button按钮事件的三种方式

    1.新创建一个类 2.使用内部类 3.当多个button按钮时,为简化代码而创建的实例listener 贴代码: MainActivity.Java  文件: package com.android. ...

  2. 二维数组中的查找（C++和Python实现）

    (说明:本博客中的题目.题目详细说明及参考代码均摘自 “何海涛<剑指Offer:名企面试官精讲典型编程题>2012年”) 题目 在一个二维数组中,每一行都按照从左到右递增的顺序排序,每一列 ...

  3. atom 常用配置

    基本配置 setting 位于 File -> setting 显示HTML标签闭合的竖线 Setting -> Editor Setting -> 勾选 Show Indent G ...

  4. Linux 学习笔记之关机问题

    在linux领域内大多用在服务器上,很少遇到关机的操作. 正确的关机流程为:sync > shutdown > reboot > halt 关机指令为:shutdown ,你可以ma ...

  5. Linux系统学习之系统启动的5个过程

    Linux 系统启动过程 Linux系统的启动过程可以分为5个阶段: 1. 内核引导 当计算机打开电源后,首先是BIOS开机自检,按照BIOS中设置的启动设备(通常是硬盘)来启动.操作系统接管硬件以后 ...

  6. Session跨域、Session共享、Mode=StateSever方式解决问题

    前言 很多童鞋在工作或面试的过程中,也许会遇到这样的问题,使用Session,怎样让多个站点实现Session共享的问题,也就是在A站点登录,那么在B站点就不需要重新登录了那?如果采用Session保 ...

  7. 如何给SAP C4C的产品主数据division配置出新的下拉选项

    如图:C4C产品主数据division字段默认的下拉菜单选项: 切换成调试模式,找到UI这个字段绑定的模型字段名称:/Root/MaterialDivision: 再找到这个UI模型字段绑定到的cor ...

  8. 将POST请求转换为DELETE、PUT等请求的方法

    一.在WEB工程的web.xml文件中配置HiddenHttpMethodFilter 二.form 表单中添加一个隐藏域 name="_method" value="D ...

  9. ios 线程同步

    https://developer.apple.com/library/content/documentation/Cocoa/Conceptual/Multithreading/ThreadSafe ...

  10. Git Brash在Windows下乱码问题

    ,/etc/gitconfig: [gui] encoding = utf- #代码库统一用urf-8,在git gui中可以正常显示中文 [i18n] commitencoding = GB2312 ...