Display/hide html table entries using javaScript/jQuery?

Question

I have a large html table gets loaded with over 50,000 entries. I need to display these in groups of 20, or some such number. The html is similar to this:

 <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>

There will be very many log entries!

I found a function that works in a similar situation but in this case doesn't. It is similar to the following. It prints out instrumentation telling me that It finds only one log entry?

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

Any hints or suggestions welcome!

Answer 1

I would not be inclined to load 50000 entries into a browser so I would recommend server side stuff to you.

If you are looking to do it client side though, take a look at https://www.datatables.net/

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

Datatables is a jquery plugin that will style your table decently as well as give you pagination (ie showing 20 rows at a time), sorting and filtering. These are all done using options in the plugin.

PS @Ted is correct: in your table structure don't throw non-table elements around (like <p> tags or <div> s)