限制分页数

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>