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

Answer 1

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

  {{row.id}}
  {{row.attr}}

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:

  {{row.id}}
  {{row.attr}}

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] = $('' +
  '' + id + '' +
  '' + attr + '' +
');

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.