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

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

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

1 个答案: