乘风原创程序

  • JS实现前端动态分页码代码实例
  • 2020/6/23 9:16:58
  • 思路分析:有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="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >2</a>
    <a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >3</a>
    <a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >4</a>
    <span>...</span>
    <a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" id="last">10</a>
    <a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" 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="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >'+i+'</a>';
          }
        }
        
        if(pagetotal<=5){
          html+='<a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" id="nextbtn">&gt;</a>';
        }else{
          if(curpage<pagetotal-2){ 
            html += '<span>...</span>';
          }
          if(curpage<=pagetotal-2){
            html += '<a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >'+pagetotal+'</a>';
          }
          html+='<a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" id="nextbtn">&gt;</a>';
        }
        return html;
      }
      
    </script>