Проблемы с нумерацией страниц - PullRequest
Новая
       29

Проблемы с нумерацией страниц

0 голосов
/ 24 октября 2018

Я пытаюсь создать простую нумерацию страниц, но я не понимаю, что я делаю неправильно.HTML: 

<nav aria-label="Page navigation example">
        <ul class="pagination">
            <li class="page-item">
                <a class="page-link" href="#" aria-label="Previous">
                    <span aria-hidden="true">&laquo;</span>
                    <span class="sr-only">Previous</span>
                </a>
            </li>
        </ul>
    </nav>

Script.js: 

var numberOfItems = $("#loop .list-group").length;
var limitPerPage = 4;

$("#loop .list-group:gt(" + (limitPerPage - 1) + ")").hide();
var totalPages = Math.round(numberOfItems / limitPerPage);
$(".pagination").append("<li class='page-item active'><a class='page-link' href='#'>" + 1 + "</a></li>");

for(var i = 2; i <= totalPages; i++){
    $(".pagination").append("<li class='page-item'><a class='page-link' href='#'>" + i + "</a></li>");
}

$(".pagination").append("<li id='next-page'><a class='page-link' href='#' aria-label='Next'><span aria-hidden='true'>&raquo;</span>    <span class='sr-only'>Next</span></a></li>");


$(".pagination li.page-item").on("click",function(){
    if($(this).hasClass("active")){
        return false;
    }else{
        var currentPage = $(this).index();
        $(".pagination li").removeClass("active");
        $(this).addClass("active");
        $("#loop .list-group").hide();

        var grandTotal = limitPerPage * currentPage;

        for(var i = grandTotal - limitPerPage; i < grandTotal; i++){
            $("#loop .list-group:eq(" + i + ")").show();
        }
    }

});

$("#next-page").on("click", function(){
    var currentPage = $(".pagination li.active").index();

    if(currentPage === totalPages){
        return false;
    }else{
        currentPage++;
        $(".pagination li").removeClass("active");
        $("#loop .list-group").hide();

        var grandTotal = limitPerPage * currentPage;

        for(var i = grandTotal - limitPerPage; i < grandTotal; i++){
            $("#loop .list-group:eq(" + i + ")").show();
        }
        $(".pagination li.page-item:eq(" + (currentPage-1) + ")").addClass("active");
    }



});

Моя проблема в том, что функция $ ("# next-page") не работает должным образом :( Всякий раз, когда я нажимаюследующая кнопка выглядит как $ (". pagination li"). removeClass ("active"); ничего не делает, но если я пишу это в консоли, это работает :( и я не понимаю, почему это делает?

1 Ответ

0 голосов
/ 24 октября 2018

содержит значение индекса пейджера с переменной (в моем коде оно называется currentPage).безопаснее и проще работать с одним значением.

var numberOfItems = $("#loop .list-group").length;
var limitPerPage = 4;

$("#loop .list-group:gt(" + (limitPerPage - 1) + ")").hide();
var totalPages = Math.round(numberOfItems / limitPerPage);
$(".pagination").append("<li class='page-item active'><a class='page-link' href='#'>" + 1 + "</a></li>");

for(var i = 2; i <= totalPages; i++){
    $(".pagination").append("<li class='page-item'><a class='page-link' href='#'>" + i + "</a></li>");
}

$(".pagination").append("<li id='next-page'><a class='page-link' href='#' aria-label='Next'><span aria-hidden='true'>&raquo;</span>    <span class='sr-only'>Next</span></a></li>");


$(".pagination li.page-item").on("click",function(){
    if($(this).hasClass("active")){
        return false;
    }else{
        var currentPage = $(this).index();
        $(".pagination li").removeClass("active");
        $(this).addClass("active");
        $("#loop .list-group").hide();

        var grandTotal = limitPerPage * currentPage;

        for(var i = grandTotal - limitPerPage; i < grandTotal; i++){
            $("#loop .list-group:eq(" + i + ")").show();
        }
    }

});
$("#next-page a").on("click", function(e){
e.preventDefault();

});
 var currentPage=0;
$("#next-page").on("click", function(){
     
   
    if(currentPage >= totalPages-1){
        return false;
    }else{
    currentPage+=1;
         $(".pagination li").removeClass("active");
        $("#loop .list-group").hide();
  $(".pagination li").eq(currentPage+1).addClass("active");
        var grandTotal = limitPerPage * currentPage;

        for(var i = grandTotal; i < grandTotal+limitPerPage; i++){
            $("#loop .list-group:eq(" + i + ")").show();
        }
        
    }



});
.active {
 color:red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="loop">
<div class="list-group">1
</div>
<div class="list-group">2
</div>
<div class="list-group">3
</div>
<div class="list-group">4
</div>
<div class="list-group">5
</div>
<div class="list-group">6
</div>
<div class="list-group">7
</div>
<div class="list-group">8
</div>
<div class="list-group">9
</div>
<div class="list-group">10
</div>
</div>
<nav aria-label="Page navigation example">
        <ul class="pagination">
            <li class="page-item">
                <a class="page-link" href="#" aria-label="Previous">
                    <span aria-hidden="true">&laquo;</span>
                    <span class="sr-only">Previous</span>
                </a>
            </li>
        </ul>
    </nav>
...