Issue with TableTools 2.0 on Hidden Tabs

happycow

Hi, first off, I'd like to thank Allan for this release. This stuff looks great!

I'm having an issue with my tables that are initialized on jQuery UI's hidden tabs. All of the html seems to have been generated correctly and I can see all of the TableTool buttons, but nothing happens when I click on them. Tables that are initialized on the visible tab seem to be working fine. Has anyone else run into this issue?

iksela

Yes I've run into this issue and was about to post when I saw that someone else had the same problem. No clue on how to work it out as of now.

allan

This is due to the inability of TableTools (or any DOM script) to find the height and width of an element which is hidden. I've just tried the following code to simulate the hidden tab effect:

[code]
document.getElementById('demo').style.display = "none";
$('#example').dataTable( {
"sDom": 'T<"clear">lfrtip'
} );
setTimeout( function () {document.getElementById('demo').style.display = "block";}, 3000);
[/code]
And indeed the buttons are non-functional.

I think what TableTools is going to have to do is provide an API function which allows the flash buttons to be initialised at any time (i.e. when a tab is activated for the first time). That will be in the next release of TableTools (which will be as soon as I've had time to make it :-) ).

Regards,
Allan

iksela

Hello Allan,
Do you when/if a fix will be available for this issue?

Thanks!

allan

There is a fix for this committed :-). You can get the nightly version from here: http://datatables.net/download/ which includes the fix, and TableTools 2.0.1 should be released soon. This is the commit note of interest:

New: API method (fnResizeButtons) to re-calculate the size of flash buttons. This is useful for when initialising TableTools when it is hidden (display:none) since sizes can't be calculated at that time.

So what you need to do is when the table is shown for the first time, call fnResizeButtons (there is another new API function called fnResizeRequired which you can call to check to see if a resize is needed). If you want to you could even set up a setTimeout/setInterval loop to check these parameters.

Allan

iksela

Thanks a lot, this worked like a charm.

If anyone is interested in actual code, I've put up a tutorial here: http://iksela.tumblr.com/post/3445022287/using-jquery-ui-tabs-and-datatables-tabletools

0a0d0s0

Hi Iksela

I had a go using your tutorial, but couldn't get it working. Here's the example:
http://www.antonyslinn.com/testing/datatables/extras/tabletoolsTabs.php

I upgraded to the latest datatables beta release... any idea what I'm doing wrong?

Thanks a lot

Antony