限制分頁編號

Question

我已經分頁並運行了，它工作正常。不過，我希望它只顯示5個頁碼，例如1.2.3.4.5，然後當我點擊下一個時，它會轉到6.7.8.9.10等等。

我用JavaScript創建它，代碼如下。

我已經嘗試了來自不同地方的多段代碼，但我很積極，我錯過了一些東西，因爲沒有任何東西可以工作。

$(document).ready(function() { 

    pageSize = 2; 
    pagesCount = $(".content").length; 
    var currentPage = 1; 

    /////////// PREPARE NAV /////////////// 
    var nav = ''; 
    var totalPages = Math.ceil(pagesCount/pageSize); 
    for (var s=0; s<totalPages; s++){ 
     nav += '<li class="numeros"><a href="#">'+(s+1)+'</a></li>'; 
    } 
    $(".pag_prev").after(nav); 
    $(".numeros").first().addClass("active"); 
    ////////////////////////////////////// 

    showPage = function() { 
     $(".content").hide().each(function(n) { 
      if (n >= pageSize * (currentPage - 1) && n < pageSize * currentPage) 
       $(this).show(); 
     }); 
    } 
    showPage(); 


    $(".pagination li.numeros").click(function() { 
     $(".pagination li").removeClass("active"); 
     $(this).addClass("active"); 
     currentPage = parseInt($(this).text()); 
     showPage(); 
    }); 

    $(".pagination li.pag_prev").click(function() { 
     if($(this).next().is('.active')) return; 
     $('.numeros.active').removeClass('active').prev().addClass('active'); 
     currentPage = currentPage > 1 ? (currentPage-1) : 1; 
     showPage(); 
    }); 

    $(".pagination li.pag_next").click(function() { 
     if($(this).prev().is('.active')) return; 
     $('.numeros.active').removeClass('active').next().addClass('active'); 
     currentPage = currentPage < totalPages ? (currentPage+1) : totalPages; 
     showPage(); 
    }); 
}); 

Answer 1

你問題的第一部分是容易

但是我會把它想只顯示5個頁碼

for (var s=0; s<Math.min(totalPages,5); s++){ 
    nav += '<li class="numeros"><a href="#">'+(s+1)+'</a></li>'; 
} 

這限制了顯示頁碼數totalPages或5，以較小者爲準。 對於你的問題的第二部分 - 看你found a lugin which does exactly what you want沒有太多的重點嘗試複製行爲。你最好直接使用它。適當的代碼將是沿着線：

pageSize = 2; 
 
pagesCount = $(".content").length; 
 
var totalPages = Math.ceil(pagesCount/pageSize) 
 

 
$('.pagination').twbsPagination({ 
 
    totalPages: totalPages, 
 
    visiblePages: 5, 
 
    onPageClick: function (event, page) { 
 
     var startIndex = (pageSize*(page-1)) 
 
     var endIndex = startIndex + pageSize 
 
     $('.content').hide().filter(function(){ 
 
      var idx = $(this).index(); 
 
      return idx>=startIndex && idx<endIndex; 
 
     }).show() 
 
    } 
 
});

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet"/> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script> 
 

 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/twbs-pagination/1.4.1/jquery.twbsPagination.js"></script> 
 
<div class="contents text-center"> 
 
    <div class="content"> 
 
     <h1>NEWS 1</h1> 
 
     <h3>Page 1 contents...</h3> 
 
    </div> 
 
    <div class="content"> 
 
     <h1>NEWS 2</h1> 
 
     <h3>Page 2 contents...</h3> 
 
    </div> 
 
    <div class="content"> 
 
     <h1>NEWS 3</h1> 
 
     <h3>Page 3 contents...</h3> 
 
    </div> 
 
    <div class="content"> 
 
     <h1>NEWS 4</h1> 
 
     <h3>Page 4 contents...</h3> 
 
    </div> 
 
    <div class="content"> 
 
     <h1>NEWS 5</h1> 
 
     <h3>Page 5 contents...</h3> 
 
    </div> 
 
     <div class="content"> 
 
     <h1>NEWS 6</h1> 
 
     <h3>Page 6 contents...</h3> 
 
    </div> 
 
     <div class="content"> 
 
     <h1>NEWS 7</h1> 
 
     <h3>Page 7 contents...</h3> 
 
    </div> 
 
     <div class="content"> 
 
     <h1>NEWS 8</h1> 
 
     <h3>Page 8 contents...</h3> 
 
    </div> 
 
     <div class="content"> 
 
     <h1>NEWS 9</h1> 
 
     <h3>Page 9 contents...</h3> 
 
    </div> <div class="content"> 
 
     <h1>NEWS 10</h1> 
 
     <h3>Page 10 contents...</h3> 
 
    </div> <div class="content"> 
 
     <h1>NEWS 11</h1> 
 
     <h3>Page 11 contents...</h3> 
 
    </div> 
 
</div> 
 
<nav class="text-center"> 
 
    <ul class="pagination"> 
 
    </ul> 
 
</nav>