JQuery show / hide column on large performance table

Question

I have an html table with about 30 columns and somewhere between 10 and 500 ish lines. I would like to show / hide a set of columns at the click of a button.

I tried 2 approaches

• iterate through the the th table and do.show () or .hide () on TH and TD.
• iterate through thead th table and change the class to show / hide TH and TD.

the function is implemented as the following fragment. However, performance is not that great. Show / Hide says that 20 columns take about 5 ~ 10 seconds, possibly 80 ~ 120 rows of data.

I'm just wondering if there is anything we can do to speed up its work.

function ToggleHeadVisibility(showHide) { var index = 0; $('#' + gridViewName + ' thead th').each(function(index) { index++; if (showHide == "SHOW") { /* $('#' + gridViewName + ' th:nth-child(' + (index) + ')').show(); $('#' + gridViewName + ' td:nth-child(' + (index) + ')').show(); */ $('#' + gridViewName + ' th:nth-child(' + (index) + ')').removeClass('columnHide'); $('#' + gridViewName + ' td:nth-child(' + (index) + ')').removeClass('columnHide'); } else if (showHide = "HIDE") { /* //if (showColumnArray.has($(this).get(0).innerHTML)) { if (showColumnArray.has($(this).attr('title'))) { $('#' + gridViewName + ' th:nth-child(' + (index) + ')').show(); $('#' + gridViewName + ' td:nth-child(' + (index) + ')').show(); } else { $('#' + gridViewName + ' th:nth-child(' + (index) + ')').hide(); $('#' + gridViewName + ' td:nth-child(' + (index) + ')').hide(); } */ if (showColumnArray.has($(this).attr('title'))) { $('#' + gridViewName + ' th:nth-child(' + (index) + ')').removeClass('columnHide'); $('#' + gridViewName + ' td:nth-child(' + (index) + ')').removeClass('columnHide'); } else { $('#' + gridViewName + ' th:nth-child(' + (index) + ')').addClass('columnHide'); $('#' + gridViewName + ' td:nth-child(' + (index) + ')').addClass('columnHide'); } } }); } 

Answer 1

Some suggestions:

• When creating the table, add css classes, such as col1, col2, col3 , etc., to the headers and data cells. Then you can just do $("td.col1").hide(); to hide the corresponding column. It is faster than the nth child selector.

• In IE and Firefox, you can set visibility: collapse to a col element to collapse the entire column. It will be much faster. Unfortunately, it is not supported in Webkit browsers http://www.quirksmode.org/css/columns.html . You can deploy your browser-based code so that it is fast at least in IE and Firefox.

• If your table has table-layout: fixed , it can significantly improve performance, because your browser does not need to constantly calculate the column widths every time you touch the table, as in automatic mode.

• Consider deleting the table from the DOM tree (via .remove() ), perform the show / hide operation and reinsert it. This is a general rule when you want to perform a bulk operation in the DOM tree.

Answer 2

Obviously, this alternative makes it easier to show and hide elements:

 .css({'display':'none'}) & .css({'display':'block'}); 

http://www.learningjquery.com/2010/05/now-you-see-me-showhide-performance

But I suspect your real problem is the cycle.

Answer 3

here is the world of code that I used to hide the nth column in my grid ...

  if (true) { $('th:nth-child(' + c + ')').show(); $('td:nth-child(' + c + ')').show(); } else { $('th:nth-child(' + c + ')').hide(); $('td:nth-child(' + c + ')').hide(); } 

Very similar to yours, except that I used jQuery to switch "show / hide";

It seems to show / hide a column of 400 rows under 1 second ...

Borik

Answer 4

You can do a lot in the field of caching. First, cache your gridView container:

 var gridView = $('#' + gridViewName); 

And subsequently the line can be cached:

 var row[0] = gridView.find('tr:nth-child(0)'); // Not sure the path is right, but you get the idea... 

Also, do the actual hiding with the set, not .each ()

 row[0].addClass('columnHide'); // Calls addClass() on each element in the set 

Caching element sets in front, rather than repeating the DOM request with $, and performing actions on sets of elements, rather than loops, can significantly affect performance.

Answer 5

Iterating through rows and columns always slows down. Try manipulating CSS rules directly to avoid iterating in your JavaScript and getting the browser to do it for you.

Checkout jQueryRule and jQueryCSSRule plugins .

Manipulating CSS rules can be useful if you combine all the rules. Here's a quick test with 500 rows and 50 columns. In most cases, re-rendering is performed, and the time spent in the JavaScript function gives me an average of 200-300 ms in Chrome and 0 ms in Firefox. It currently uses standard APIs, but it is trivial to extend this to IE.

It works by creating a new <style> node inside the document and adding all the column manipulations there. The basic idea is to combine all the rules into one, hiding certain columns. Therefore, instead of doing:

 table tr :nth-child(1) { display: none; } table tr :nth-child(4) { display: none; } table tr :nth-child(7) { display: none; } 

he does:

 table tr :nth-child(1), table tr :nth-child(4), table tr :nth-child(7) { display: none; } 

When all columns need to be mapped back, delete this one rule above, which hides certain columns.

Answer 6

Can I suggest something like this?

 $(function() { $('#show').click(function() { var i; for (i = 0; i < titles.length; i++) { ToggleHeadVisibility('SHOW', titles[i]); } }); $('#hide').click(function() { var i; for (i = 0; i < titles.length; i++) { ToggleHeadVisibility('HIDE', titles[i]); } }); }); var titles = ['one', 'three', 'five']; function ToggleHeadVisibility(showHide, title) { var x = $('th[title=' + title + ']').index(); var selectString = 'th:nth-child(' + (x + 1) + '), td:nth-child(' + (x + 1) + ')'; var $set = $(selectString); if (showHide === "SHOW") { $set.show(); } else if (showHide === "HIDE") { $set.hide(); } } 

I think that, in fact, is your loop, that is the problem. You repeat everything in the table. If you only want to find specific ones, why not just sort through the ones you want to find?

So what is going on here is exactly the case. When you click the "show" (or "hide") button, we iterate over the array of titles, calling ToggleHeadVisibility.

In this function, we get the index of the first element with this header, and then show or hide the nth-child (x) nodes.

I ran it on a table with 6 columns, showing and hiding 3 at a time, and more than 1000 rows. This is pretty fast for what he is doing.

Please note that if your headers are not unique, it will only find the first one in the table.