How to filter a very large bootstrap table using pure Javascript

Question

I've built a large table in bootstrap, about 5,000 rows x 10 columns, and I need to filter the table for specific attributes, fast, using only JavaScript. The table has both an id column and an attribute column, i.e.

id | attr | ...
---------------
2  |  X   | ...
3  |  Y   | ...
4  |  X   | ...

To make the filtering process fast, I built a hashtable table that maps the attributes back to the column ids. So for example, I have a mapping:

getRowIds["X"] = [2,4]

The user can enter the attribute "X" in a search box, the hashtable then looks up the corresponding rows that contain "X" (2 and 4 in this case), and then calls the following functions via a map operation:

this.hideRow = function(id) {
    document.getElementById(id).style.display="none"
}

this.showRow = function(id) {
    document.getElementById(id).style.display=""
}

This process is still quite slow, as the user is allowed to select multiple attributes (say X,Y).

Is there a faster way of hiding the rows?

Would it be faster if I could somehow detach the table from the DOM, make the changes, and then re-attach? How do I do this in javascript?

Are there other more efficient/smarter ways of doing the filtering?

Thanks :)

Answer 1

I would ask

• Why you want to write this code for yourself? From personal experience, trying to filter efficiently and on all browsers is a non-trivial task.
• If you are doing this as a learning experience, then look at source of the packages listed below as examples.
• With 5000 rows, it would be more efficient to do server side filtering and sorting. Then use ajax to update the displayed table.

I would suggest that you look at using one of the several JavaScript packages that already do this. There are many more packages that the two below. I'm showing these two as examples of what is available.

• http://datatables.net/ - This is a very full featured package that handles both client and server side filtering and sorting.
• http://www.listjs.com/ - is a lightweight client side filtering and sorting package.

Answer 2

Using AngularJS can indeed be a good idea, which lets us render your rows as simple as

<tr ng-repeat="row in rowArray">
  <td>{{row.id}}</td>
  <td>{{row.attr}}</td>
</tr>

where you only need to supply your rowArray as array of objects like {id: 1, attr: 'X'}, see the documentation for ng-repeat directive. One of Angular's big powers lies in its extremely compact code.

Among other things, Angular also has powerful filter building library to filter and sort your rows on the fly right inside your HTML:

<tr ng-repeat="row in rowArray | yourCustomFilter:parameters">
  <td>{{row.id}}</td>
  <td>{{row.attr}}</td>
</tr>

Having said that, it'll clearly be a performance drag to throw 5K rows into your array. That would create a huge HTML in your browser memory that, however, will not fit into your viewport. Then there is no point to have it in the memory if you can't show it anyway. Instead you only want to have the viewable part in your memory plus possibly a few more rows around.

Have a look at the directive "Scroll till you drop" provided by Angular UI Utils - it does exactly that!

Pagination as mentioned in another answer is surely a valid alternative to the infinite scroll. There is lot written on the web about strengths and weaknesses of pagination vs infinite scroll if you want to dig into that.

---

Speaking of your code specifically, it has other performance drags. For instance, on each call, this function

document.getElementById(id).style.display="none"  

will look up the DOM for the element by its id, and then will look up its property .style (which can be a drag if the JavaScript needs to go high up in the Prototype chain). You could do much better performance wise by caching direct reference links to the display properties, which are the ones you really need.

---

EDIT. By caching here I mean pre-compiling a hash linking id with the interesting properties:

hash[id] = document.getElementById(id).style.display

Then you switch the style by simple setting:

hash[id] = 'none'
hash[id] = 'block'

This way of calculating hash assumes that your elements are all inside the DOM, which is bad for performance, but there are better ways!

Libraries like jQuery and, of course, Angular :) will let you create your HTML elements with their complete style properties but without attaching them to the DOM. That way you are not overloading your browser's capacity. But you can still cache them! So you will cache your HTML (but not DOM) Elements and their Display like that:

elem[id] = $('<tr>' +
  '<td>' + id + '</td>' +
  '<td>' + attr + '</td>' +
</tr>');

display[id] = elem[id].style.display;

and then attach/ detach your elements to the DOM as you go and update their display properties using the display cache.

Finally note that for better performance, you want to concatenate your rows in a bundle first, and only then attach in a single jump (instead of attaching one-by-one). The reason is, every time your change the DOM, the browser has to do a lot of recalculation to adjust all other DOM elements correctly. There is a lot going on there, so you want to minimize those re-calculations as much as possible.

---

POST EDIT.

To illustrate by an example, if parentElement is already in your DOM, and you want to attach an array of new elements

elementArray = [rowElement1, ..., rowElementN]

the way you want to do it is:

var htmlToAppend = elementArray.join('');

parentElement.append(htmlToAppend);

as opposed to running a loop attaching one rowElement at a time.

Another good practice is to hide your parentElement before attaching, then only show when everything is ready.