ページネーション番号を制限する

Question

ページ設定ができていて、正常に動作しています。しかし、たとえば、1.2.3.4.5のように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のいずれか小さい方。 質問の2番目の部分については、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>