Как показать элемент вкладки с нумерацией страниц

Question

Я хочу создать элемент управления Pagination с вкладками данных JSON, которые я получаю из запроса AJAX. Я перетаскиваю его на вкладки следующим образом:

Мне удалось отобразить все данные и сначала показать только 10, а после нажатия кнопки «страница 2» скрываются первые 10 и 10 после того, как отображаются те 10, которые мне нужны; с максимальным числом 10 на страницу, и число страниц является динамическим, активная страница работает, и я вошел в консоль информацию, чтобы убедиться в этом.

Но когда я нажимаю на номер страницы, отличный от 1, данные скрываются, но если я нажимаю на первой странице, они отображают данные.

https://www.youtube.com/watch?v=Xznn-ggD0GU я нашел этого парня и хотел сделать то же самое, но я могу забыть что-то вроде плохо выбранного класса или идентификатора ...

HTML:

<div class="container">
  <div id="conTable" class="table-responsive-xl">
    <!-- Tableau de données des mails -->
    <table class="table table-hover table-dark mail">
      <thead>
        <tr>
          <th scope="col">#</th>
          <th scope="col">Date</th>
          <th scope="col">From</th>
          <th scope="col">To</th>
        </tr>
      </thead>
      <tbody class="ItemMail">
        <!-- Insertion infos des mails avec JQuery/AJAX depuis main.js-->
      </tbody>
    </table>
  </div>
  <!-- Pagination -->
  <nav aria-label="Page navigation example">
    <ul class="pagination d-flex justify-content-center">
      <!-- Insertion du Bouton "Previous" -->
      <!-- Insertion du nombres de pages -->
      <!-- Insertion du Bouton "Next" -->
    </ul>
  </nav>
</div>

Код JQuery / JS, который принимает мои данные:

$("#contTable").toggleClass('d-block table-responsive-xl');

for(ligne in response) {
  console.log(response[ligne].hits)
  var res=response[ligne].hits;

  for(ligne2 in res) {
    var lastEventDate=res[ligne2]._source.last_event_date;
    var from=res[ligne2]._source.from;
    var to=res[ligne2]._source.to;

    $(".ItemMail:last").append(
      "<tr>"+
      "<th scope='row'>"+(increment+=1)+"</th>"+
      "<td>"+lastEventDate+"</td>"+
      "<td>"+from+"</td>"+
      "<td>"+to+"</td>"+
      "</tr>"
    );
  }
}

И, наконец, мой код нумерации страниц:

//Pagination
var TotalMail=response.hits.total;
var limitMailParPage=10;
// cache les mails au dessus du nombre max de limitMailParPage
$(".ItemMail:gt("+(limitMailParPage-1)+")").hide();
// compte le nombre de pages qu'il faudra pou stocker les mails
var nbrDePage=Math.round(TotalMail/limitMailParPage);

// Insertion du nombre 1 pour le mettre en active par défaut
$(".pagination li:first").after("<li class='page-item current active'><a class='page-link' href='javascript:void(0)'>"+1+"</a></li>");

for(var i=2; i<=nbrDePage; i++) {
  $(".pagination li:last").before("<li class='page-item current'><a class='page-link' href='javascript:void(0)'>"+i+"</a></li>");
}

$(".pagination li.current").click(function() {

  if($(this).hasClass("active")) {
    return false;
  }
  else {
    var currentIndex=$(this).index();
    $(".pagination li").removeClass("active");
    $(this).addClass("active");
    $(".ItemMail").hide();

    // marche pas à partir d'ici
    var grandTotal=(limitMailParPage*currentIndex);
    console.log(grandTotal+" GRAND TOTAL");

    for(var i=grandTotal-limitMailParPage; i<grandTotal; i++) {
      console.log(i);
      $(".ItemMail:eq("+i+")").show();
    }
  }
});

Answer 1

Вместо show hide parent div включается tr. Пожалуйста, обратитесь ниже код. ('.ItemMail') - ваш родительский класс div. Вы скрываете весь div, поэтому вторая страница пуста. Попробуйте приведенный ниже код, и он решит вашу проблему.

var TotalMail=response.hits.total;
var limitMailParPage=10;

// cache les mails au dessus du nombre max de limitMailParPage
$(".ItemMail tr:gt("+(limitMailParPage-1)+")").hide();

// compte le nombre de pages qu'il faudra pou stocker les mails
var nbrDePage=Math.round(TotalMail/limitMailParPage);

// Insertion du nombre 1 pour le mettre en active par défaut
$(".pagination li:first").after("<li class='page-item current active'><a class='page-link' href='javascript:void(0)'>"+1+"</a></li>");

$(".pagination li.current").click(function() {

  if($(this).hasClass("active")) {
    return false;
  }
  else {
    var currentIndex=$(this).index();
    $(".pagination li").removeClass("active");
    $(this).addClass("active");
    $(".ItemMail tr").hide();

    // marche pas à partir d'ici
    var grandTotal=(limitMailParPage*currentIndex);
    console.log(grandTotal+" GRAND TOTAL");

    for(var i=grandTotal-limitMailParPage; i<grandTotal; i++) {
      console.log(i);
      $(".ItemMail tr:eq("+i+")").show();
    }
  }
});