思路分析：有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. 《一马当先 O2O创业真人秀》阿里云创客+项目提交报名中

    传统行业与互联网的相互融合,线上与线下的互通,正在掀起一股“互联网+”新风潮和创业热潮.支付宝钱包.快的打车.淘点点……这些耳熟能详的应用早已成为人们生活的一部分.而越来越多的“互联网+”创新项目,将 ...

  2. C++中protected的访问权限

    关于C++中protected的访问权限的讨论已经是一个很陈旧的话题了,陈旧到大家都不愿意去讨论,觉得他见到到吃饭睡觉那么自然. 我再次读<C++ Primer>的时候,其中关于prote ...

  3. java.langThrowable:STACKTRACE

    Jboss版本是4.2.0.GA代码运行完后总报错 但是程序的运行结果没问题 请问下这是什么原因2009-12-11 01:53:26,611 INFO  [org.jboss.resource.co ...

  4. Linux->ZooKeeper开机启动的俩种方式

    两种方式可以实现开机自启动 第一种:直接修改/etc/rc.d/rc.local文件 在/etc/rc.d/rc.local文件中需要输入两行, 其中export JAVA_HOME=/usr/jav ...

  5. 程序单一实例实现 z

    不少应用程序有单一实例的需求,也就是同时只能开启一个实例(一般也就是一个进程). 实现的方式可能有判断进程名字,使用特殊文件等等,但是最靠谱的方式还是使用系统提供的 Mutex 工具. Mutex是互 ...

  6. UIButton中的**EdgeInsets是做什么用的?

    UIButton中的**EdgeInsets是做什么用的? UIEdgeInsetsMake Creates an edge inset for a button or view.An inset i ...

  7. Python初学者第八天 元组和字典

    8day 1.数据类型:元组 元组:有序的,不可变地数据的集合.但若包含其他可变元素,这些元素可变.显示的告诉别人,此处不可修改: a = (1,2,3,4,5,['1','a']) 2.数据类型:字 ...

  8. cmd：相关命令和笔记

    (1)查看git版本:git --version (2)

  9. myeclipse 复制项目不包含svn或CVS目录

    目前只记录到2个方法:(SVN和CVS都适用) 方法一:导出法 1.右击需要cp的目录,点击export,General/File System 2.next 3.确认你选择的目录,并勾选:Creat ...

  10. jQuery插件开发精品教程，让你的jQuery提升一个台阶（转）

    原文:http://www.cnblogs.com/Wayou/p/jquery_plugin_tutorial.html 要说jQuery 最成功的地方,我认为是它的可扩展性吸引了众多开发者为其开发 ...