使用JavaScript / jQuery顯示/隱藏html表條目？

Question

我有一個很大的html表，加載了50,000多個條目。 我需要以20個或一組這樣的數字顯示這些。 html與此類似：

 <tbody>
    <tr>
      <table class="order-table Logs" style="width: 472px;" >
     <thead>
       <tr>
         <th>Heading1</th>
         <th>Heading2</th>
         <th>Heading3</th>
         <th>Heading4</th>
         <th>Heading5</th>
      </tr>
   </thead>
   <tbody>
   [% FOREACH changeLog IN PO.changeLogs %]
   <div id="change_order_entries"
   <tr>
     <td>[%date.format(changeLog.ts, '%m/%d/%y   %l:%M %p')%]</td>
     <td>[%Log.nameFirst%] [%changeLog.nameLast%]</td>
     <td>[%Log.field%]</td>
     <td>[%cLog.oldValue%]</td>
     <td>[%Log.newValue%]</td>
    </tr>
    </div>
   [% END %]
  </tbody>
 </table>
</tbody>

會有很多日志條目！

我發現了在類似情況下也可以使用的功能，但在這種情況下無效。 它類似於以下內容。 它打印出檢測結果，告訴我它僅找到一個日志條目？

function showMoreLogs() {

    var revealed = 0;
    $('.order-table').each(function() {
     var $this = $(this);
     if ($this.is(':hidden') && revealed < 10) {
        $(this).show();
        revealed++;
     }
 });

    var hidden = $('.order-table').filter(":hidden").size();
    if (hidden > 0) {
       if (hidden == 1) {
          $('#more-orders').html('Get 1 More Change Logs');
       } else if (hidden <=5) {
          $('#more-orders').html('Get ' + hidden + ' More Change Logs.');
       } else {
     $('#more-orderd').html('Get 10 More Change Logs');
   }
   } else {
     console.log("Hidden: ", hidden);
     $('#more-orders').hide();
   }
    return false;
  }

歡迎任何提示或建議！

Answer 1

我不會傾向於將50000個條目加載到瀏覽器中，所以我會向您推薦服務器端的東西。

如果您希望在客戶端這樣做，請查看https://www.datatables.net/

$(document).ready(function(){
    $('.Logs').DataTable();
});

Datatables是一個jquery插件，它將為您的表設置適當的樣式，並為您提供分頁（即一次顯示20行），排序和過濾功能。 這些都是使用插件中的選項完成的。

PS @Ted是正確的：在您的表結構中不要亂扔非表元素（例如<p>標記或<div> s）