JS實現前端動態分頁碼

時間 2019-12-14

標籤實現前端動態頁碼欄目 JavaScript 简体版

原文原文鏈接

思路分析：有3種狀況javascript

第一種狀況，當前頁面curPage < 4css

第二種狀況，當前頁面curPage == 4html

第三種狀況，當前頁面curPage>4前端

此外，還要考慮，當前頁碼 curPage < pageTotal（總頁碼）-2，才顯示 ...java

首先，先是前端的佈局樣式app

<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代碼spa

<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>

前端技術分享：加入code