javascript - 使用 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 行)、排序和过滤功能。这些都是使用插件中的选项完成的。

附注@Ted 是正确的:在您的表结构中，不要乱扔非表元素(例如 <p> 标签或 <div> s)