如何使用分页显示选项卡的项目

Question

我想使用从 AJAX 请求中检索的 JSON 数据选项卡制作分页控件，我将其拉到这样的选项卡上：

我设法显示所有数据并首先显示 10，然后如果我点击“第 2 页”，它会先隐藏 10，然后隐藏 10，以显示我需要的 10；每页最多 10 个，并且页面数是动态的，活动页面有效，我在控制台中登录了信息以确保它。

但是当我点击一个不同于 1 的页码时，数据会被隐藏，但如果我点击第一页，它会显示数据。

https://www.youtube.com/watch?v=Xznn-ggD0GU我找到了这个人，我也想这样做，但是我可能会忘记选择错误的类或 id 之类的东西...

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();
    }
  }
});