Table with large number of rows is slow to update

Question

I have a page with a very large table (several thousand rows).

The table shows a subset of data specified by certain filters. I need the table to update whenever one of the filters changes.

Basically, there are a few check boxes and a text box, whenever one of these changes I reload the table to display only those rows which fit the criteria specified by the user.

I'm doing this by clearing the table and reloading the rows that match the filters. This works but has proven to be very slow.

Here is my javascript code:

function reloadTable() {
    var tablebody = document.getElementById("tablebody");

    while(tablebody.hasChildNodes()) tablebody.removeChild(tablebody.firstChild);

    filter = new FilterChecker();

    for (var i=0;i<rows.length;i++) {
        if (filter.isVisible(rows[i]))
            addRowToTable(rows[i]);
    }
}

Is there a way to make it faster?

Answer 1

Alright, sorry for the delay, but I got wrapped up in work. I came up with a nice set of logic that illustrates what you need.

FIDDLE

I created some simple html to illustrate the point. It contains two drop downs to mimic the filters and 8 data rows to mimic your data grid.

<div id="body">
<select id="filterA" class="filter" name="states">
    <option value="filterACT">Connecticut</option>
    <option value = "filterAMA">Mass</option>
</select>
<select id="filterB" class="filter" name="towns">
    <option value="filterBBT">Big Town</option>
    <option value = "filterBST">Small Town</option>
</select>
<div id="grid">
    <div class="row filterACT filterBBT">BigTown CT 1</div>
    <div class="row filterACT filterBBT">BigTown CT 2</div>
    <div class="row filterACT filterBST">SmallTown CT 1</div>
    <div class="row filterACT filterBST">SmallTown CT 2</div>
    <div class="row filterAMA filterBBT">BigTown MA 1</div>
    <div class="row filterAMA filterBBT">BigTown MA 2</div>
    <div class="row filterAMA filterBST">SmallTown MA 1</div>
    <div class="row filterAMA filterBST">SmallTown MA 2</div>
</div>
</div>
</br>
<hr/>
<div>LOG</div>
<hr/>
<div id="log"></div>

The log div is simply to show an output, which I think would be helpful. Each row is identified by class 'row' followed by another series of classes. These classes help determine what their filter data is. You would need to set this programmatically when building the grid. Additionally, these class names must match the filter option values. You can see that the first row has classes from the first option in filterA and from the first option in filterB.

Now, the javascript is a bit verbose, but you can refactor to your hearts content. Sometimes I find it easier when things are explicit when you are trying to understand them. Also, admittedly, I would do this with jQuery, so my pure Javascript isn't as sharp.

var elements = document.getElementsByClassName('filter');

writeToLog("Filter elements found: " + elements.length);

for(var e = 0;e < elements.length;e++)
{
    elements[e].onchange =function() {   
        writeToLog('Filter event fired for id:'+this.id);
        filterChange();
    };
}

First I get all the elements with the filter class, this would be your filters. I then iterate over them and set their onchange event to call the filterChange() method. The writeToLog() method calls are just for output purposes.

    function filterChange() {
    var filterClasses = [];
    for(var i = 0;i<elements.length;i++) {
        writeToLog('Pushing ('+elements[i].value+') into filter class variable.');
        filterClasses.push(elements[i].value);        
    }

In the first part of the function I get all the select filter option values and put them into an array.

    writeToLog('Filter classes: ' + filterClasses);
    var rows = document.getElementsByClassName('row')
    writeToLog('Row count: ' + rows.length);

I then get all of the rows, in my grid and start to iterate over them:

    for(var j = 0;j<rows.length;j++)
    {
        writeToLog('Checking row: ' + rows[j].className);
        var rowIsHidden = false;

Once I have a row, in the loop, I iterate the filter classes in the array and see if this row's classes have it. If not, I set rowIsHidden to true, otherwise it stays false.

        for(var k = 0;k<filterClasses.length;k++)
        {
            writeToLog('Checking for class: ' + filterClasses[k]);
            if(rows[j].className.indexOf(filterClasses[k]) < 0)
            {
                writeToLog('Class not found, hide this row.');
                rowIsHidden = true; 
                break;
            }
        }

Before the loop moves to the next row, I set the display style based on the rowIsHidden value.

        writeToLog('Row is hidden: ' + rowIsHidden);
        rows[j].style.display = rowIsHidden ? 'none' : 'block';

    }
}

By all means, this can be cleaned up and certainly optimized, but I think the intent and logic is fairly clear. Hope this helps and feel free to question any of it :)