Hide / show * very * slow

Question

I am currently using hide / show functions in jQuery to help filter a table into groups from a select box.

The actual code works fine, but it is incredibly slow, sometimes it takes a minute or two to execute.

I switched the code, so instead of hide () and show () it uses css({'display':'none'}); and css({'display':'block'}); - , the difference in speed is simply unbelievable, now it takes only a few seconds, but in Firefox the table data is all crushed for each row.

This is not the end of the world, since here we almost exclusively use Internet Explorer, but I'm still wondering if there is a way around it, since a huge number of people (including me) use Firefox.

Answer 1

In firefox, to show / hide the table row, you must set the following.

 //To show $("tr").css("display", "table-row"); //To hide $("tr").css("display", "none"); 

Answer 2

The jQuery API indicates that a duration can be specified for the .show and .hide functions. I suspect that when you install this, it may solve your problem.

See the docs for .show () .

See the docs for .hide () .

Answer 3

The answer that mentions the duration for show () and hide () is good. However, if you have too many rows, the difference between show() and display: block or display: table-row is that show() starts the animation for each row. This can slow down, especially on large tables.

If you are really trying to get some performance, try looking at the source code for jqGrid or SlickGrid. The latter has an insanely fast filtering function that will definitely work. If this is too much for you, just go with display: block or display: table-row and display: none . You can even create your own jQuery plugin that shows showFast and hideFast, so you don't need to repeat this code.