HTML Table Filtering and Reflow

Question

I have a very large html table with 900+ rows. I have filtering enabled by looping through the rows and hiding/showing rows according to the value of the filter.

Here's the problem. When I hide/show 500+ rows, the page becomes completely unresponsive while the browser is busy with the reflow. I have tried hiding the table before filtering, cloning the table and then replacing the table, etc. But the unresponsiveness remains an issue because it prevents me from having an 'animated' loading image while the browser redraws.

Pagination is not an option, nor is lazy-scrolling.

Here is the loop:

var rows = null;
$("#mavis-filters").find("input:checkbox").on("click", function() {
   var id, i;      
   if (!rows) {
      rows = document.getElementById("taskOverview").querySelectorAll("tr");
   }
   id = this.id; 
   i  = rows.length;

   while (i--) {
      var row = rows[i];
      if (row.dataset.project === id) {
         row.classList.toggle("row-hidden");
      }
   }

});

Answer 1

Use progressive rendering to resolve this issue. Here is how to apply it in each browser:

• Use table-layout:fixed to enable progressive rendering
• In Firefox/Camino, set html5.parser.enable=false in about:config
• Optimize the table markup
• Use DOM methods rather than jQuery