纯JS实现前端动态分页码

时间: 2018-10-11阅读: 1839标签: 前端

思路分析:有3种情况

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


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


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


此外,还要考虑,当前页码 curPage < pageTotal(总页码)-2,才显示 ...

 

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

<body>
      /*首先,在body中添加div id="pagination" */
      <div id="pagination">
<!-- 后面会在js中动态追加 ,此处为了,实现前端效果,所以注册
<a id="prevBtn"><</a>
<a id="first">1</a>
<a href="#">2</a>
<a href="#">3</a>
<a href="#">4</a>
<span>...</span>
<a href="#" id="last">10</a>
<a href="#" 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">&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 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="#">'+i+'</a>';
            }
        }
        
        if(pageTotal<=5){
            html+='<a href="#" id="nextBtn">&gt;</a>';
        }else{
            if(curPage<pageTotal-2){ 
                html += '<span>...</span>';
            }
            if(curPage<=pageTotal-2){
                html += '<a href="#">'+pageTotal+'</a>';
            }
            html+='<a href="#" id="nextBtn">&gt;</a>';
        }
        return html;
    }
    
</script>

来源:https://www.cnblogs.com/littleboyck/archive/2018/10/10/9769051.html


站长推荐

1.云服务推荐: 国内主流云服务商,各类云产品的最新活动,优惠券领取。地址:阿里云腾讯云华为云

2.广告联盟: 整理了目前主流的广告联盟平台,如果你有流量,可以作为参考选择适合你的平台点击进入

链接: http://www.fly63.com/article/detial/1135

关闭

现在学web前端还来得及吗?

前端是个最近几年火起来的工种,而且持续火热中,有个词叫水涨船高,来的人多了,竞争多了,标准也就提高了。现在对前端工程师的要求跟当年前已经不能同日而语了。

自学WEB前端的详细路线

学习web前端编程技术肯定是以就业拿到高薪工作为主要目的的,可是高薪不会那么轻易拿到,这是一个最简单的道理。没有付出就没有回报,在整个学习web前端编程技术的过程中,你需要付出时间、精力、金钱。废话不多说直接上干货

前端一定要会node吗?

Node 是一个让 JavaScript 运行在服务端的开发平台,它让 JavaScript 成为与PHP、Python、Perl、Ruby 等服务端语言平起平坐的脚本语言。

千万级用户网站门户前端设计

对于千万级的注册用户的门户项目是前端这块是怎么去实现的,自己在平常的工作中总结了一些经验,也是在不断的挫折中,不断演练的,希望总结出来给大家参考下,和大家一起探讨,一起进步。

一位工作10年的前端总结的10个忠告

最近在知乎看到这样一个问题:作为IT行业的过来人,你有什么话想对后辈说的?笔者作为一位工作10年的老前端,忍不住也答了一波,为前端的朋友们总结了10条“走心”建议,都是那些年我踩过的坑,希望能帮你少走一些弯路。

0基础适合学前端吗?

大家都担心自己是零基础学习编程太过于困难,那什么是有基础呢?有得人一开始就对编程很感兴趣,就像我们上学,有的对语文感兴趣,有的对数学感兴趣,有些人通过后天的不断累积和学习练就了一身的本领

合格的前端不少,优秀的不多

同样的前端工作,有人的工作输出确实是更加的优秀。人与人之间,真的有很大的差别。 今天,我们就来聊一下身边的优秀的前端,是怎样对待前端这份工作的?总结了几点

前端初学者们4点建议,面试时应该关注哪些

现在的前端技术的发展日新月异,各种新技术层出不穷。前后端分离的开发模式也让前端开发者的地位日益提升,待遇日渐水涨船高,自然有很多小伙伴慕名入了前端开发的坑,希望能在前端领域大展宏图

使用jenkins进行前端项目自动部署

使用jenkins进行前端项目自动部署:后端的nodeJS项目可以使用pm2进行自动部署,由于前端项目打包后是静态资源,不需要进程守护。一般地,前端项目使用jenkins来进行自动部署,包括打包、测试等一系列流程。本文将详细介绍jenkins的使用

前端权限控制

权限管理一般分以下 3 个基础概念:功能点,角色,用户。它们之间的关系一句话就能说清楚:一个用户可以拥有多个角色,而一个角色可以包含多个功能。

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!