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>

限制分页号码

1 个答案: