纯JS实现前端动态分页码

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

思路分析:有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


前端开发Code Review内容【vue记录】

代码审查的重要性,对码农来说自是不言而喻, 这里记录一次 Code Review的简单纪要,主要以代码审查优化内容为主。

前端的焦虑,你想过30岁以后的前端路怎么走吗?

曾几何时,我总会很庆幸自己进了前端这个行业。因为在这个职业范畴里面,我如鱼得水,成长很快,成就感满满。然而,随着年龄和工龄的增长,渐渐发现自己的瓶颈越来越明显了,我感觉自己似乎碰到了前端的天花板

学习web前端?如何找工作?

解释一下web前端工作是做啥的,Web前端开发工程师,主要职责是利用(X)HTML/CSS/JavaScript/Flash等各种Web技术进行客户端产品的开发。完成客户端程序(也就是浏览器端)的开发

前端程序员需要具备的几个软实力

有很多关于前端程序员的调侃,比如:智商很高情商却很感人,思维缜密,极客,加班严重,没有对象只能new一个……虽然不是所有前端程序员都是这样

学习web前端培训就业前景怎么样?

随着移动端的快速发展,web前端人员的需求量也是越来越大。Web就是未来,我们作为前端开发工作者也是未来,相信 Web前端开发的明天会更好。所以,我们一定要抓住时代发展的机遇。

为什么前端开发这么不稳定?

我们都有这样的经历:当学习了一种前端技术的时候,同时会有几种新的前端技术诞生。 还有,你选择的那种前端技术,也许已经过时了。然而我们似乎也从来没有关注为什么会这样

web前端知识体系图

Web前端技术由 html、css 和 javascript 三大部分构成,是一个庞大而复杂的技术体系,其复杂程度不低于任何一门后端语言。而我们在学习它的时候往往是先从某一个点切入,然后不断地接触和学习新的知识点

web前端如何自学?少走弯路

我做web前端开发将近6年的时间了,现在月薪可以接近30000已经算知足了,但是距离我年薪百万的目标还有很长的路要走,而以后靠的不能仅仅是技术,更是一些管理和带人方面的知识和头脑

web前端工程师前景未来

接触过前端编程的码农都知道,jQuery 风靡一时,其清新优雅的 DOM 操作、稳如磐石的兼容性处理、灵活高效的封装和链式调用,让人如沐春风

为什么那么多自学WEB前端的后来都放弃了,总结起来就这些原因

互联网公司注重效率,所以不会培养新人,所以想要从事web前端开发,就要从开始靠我们自己学到技术,以后的竞争会越来越激烈。优胜劣汰,物竞天择,适者生存。

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

广告赞助文章投稿关于web前端网站点搜索站长推荐网站地图站长QQ:522607023

小程序专栏: 土味情话心理测试脑筋急转弯幽默笑话段子句子语录成语大全