思路分析：有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. 抖音C#版，自己抓第三方抖音网站

    感谢http://dy.lujianqiang.com技术支持 文章更新:http://dy.lujianqiang.com这个服务器已经关了,现在没用了 版权归抖音公司所有,该博客只是为交流学习所使 ...

  2. Genymotion模拟器拖入文件报An error occured while deploying the file的错误

    今天需要用到资源文件,需要将资源文件拖拽到sd卡中,但老是出现这个问题: 资源文件拖不进去genymotion.查看了sd的DownLoad目录,确实没有成功拖拽进去. 遇到这种问题的,我按下面的思路 ...

  3. 使用Mist部署Contract到Rinkeby以太坊网络

    本文使用MyEthWallet新建一个账号,并导入到Mist中,然后部署Contract到Rinkeby网络使用MyEthWallet新建账号的好处是除了JSON文件之外,还能得到一张它生成的pdf( ...

  4. Php 性能参数优化 及 Iptables 防火墙限制用户访问平率

    Php-Fpm.Conf 文件配置优化 [global] pid = run/php-fpm.pid process_control_timeout=5 [www] listen.allowed_cl ...

  5. 个体商户POS机遭遇禁刷 职业养卡人称自有对策

    “套现猛于虎也”,这对于信用卡业而言无异于一大命门,信用卡套现金额的规模如同滚雪球般愈演愈烈.记者昨日采访银行业内了解到,虽然为防套现将根据规定关闭个体商户POS机刷信用卡的功能,但职业“养卡人”不以 ...

  6. Python文件夹与文件的操作 ZZ

    最近在写的程序频繁地与文件操作打交道,这块比较弱,还好在百度上找到一篇不错的文章,这是原文传送门,我对原文稍做了些改动. 有关文件夹与文件的查找,删除等功能 在 os 模块中实现.使用时需先导入这个模 ...

  7. sqlserver数据库使用空间监控

    数据库使用空间监控,并且每周发邮件预警,下面是操作步骤: 1:建立一张表 ), database_name ), file_group ), logical_name ), physical_name ...

  8. Spring学习总结之---装配Bean

    Spring配置的可选方案 前言:Spring容器负责创建应用程序中的bean并通过DI来协调这些对象之间的关系,作为开发人员,你需要告诉Spring容器要创建那些Bean,以哪种方式创建,并且如何将 ...

  9. 中间人攻击之劫持登录会话(cookies)

    关于中间人攻击 中间人攻击(Man-in-the-MiddleAttack,简称"MITM攻击")是一种"间接"的入侵攻击,这种攻击模式是通过各种技术手段将受入 ...

  10. MongoDB插入文档

    db.collection.insertOne() 插入单个文档.db.collection.insertMany() 插入多个文档.db.collection.insert() 插入单/多个文档.  ...