当前位置： 移动技术网 > IT编程>开发语言>JavaScript > 纯JS实现前端动态分页码

纯JS实现前端动态分页码

2018年10月11日  | 移动技术网IT编程  | 我要评论

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

 

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网