Hide/Show table programmatically?

orange_roughy

Hi,

I have a datable which I want to hide initially. When a users clicks a button, the datatable appears. I've tried a few ideas, all of which have their problems. Here are a couple:
[code]
$("#my-table").hide() // table is initially hidden as I add table rows to it using jQuery
$("#my-table").dataTable(); // turn it into a datable
$(#my-table_wrapper).hide(); //datables creates a div with my-table_wrapper
// user clicks button...
$(#my-table_wrapper).show();
[/code]
That results in the datable always being hidden; I don't know why, perhaps you are using jQuery.toggle() somewhere?

Another attempt:
[code]

....

$("#table-wrapper").hide() // table is initially hidden as I add table rows to it using jQuery
// user clicks button...
$(#table-wrapper).show();
[/code]
That results in the column everything showing correctly *except* the thead, which contains my filter boxes per http://www.datatables.net/examples/api/multi_filter.html

Here is how I'm creating the datable:
[code]
var myTable= $("#my-table").dataTable({
"bScrollInfinite": true,
"bScrollCollapse": true,
"sScrollY": "200px",
"oLanguage": {
"sSearch": "Global Search:"
}
});
[/code]

Help!

Thank you,
orange_roughy

allan

Do it the second way, but when you show the table, also call the API function fnAdjustColumnSizing - http://datatables.net/api#fnAdjustColumnSizing . This will allow the columns to be correctly sized. The reason it doesn't work without this is that the browser doesn't calculate dimensions for hidden elements (an optimisation) so the size calculations can't be done at the time.

So, show then fnAdjustColumnSizing :-)

Allan

allan

Oh one thing - we've notices that IE is VERY slow when traversing the DOM for hidden elements - so if your table is reasonably long - IE is going to suffer with this method. Best way to see if it is acceptable is to try it.

Allan

rewen

Doubt this is your problem but I noticed that you are missing quotes on lines 3 and 5 of your first attempt and line 6 of your second attempt. That seems like it would definitely prevent you from showing the table.

orange_roughy

Allan, thanks for the advice. fnAdjustColumnSizing did the trick!