Issue with TableTools 2.0 on Hidden Tabs

Issue with TableTools 2.0 on Hidden Tabs

happycowhappycow Posts: 3Questions: 0Answers: 0
edited January 2011 in TableTools
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?

Replies

  • ikselaiksela Posts: 13Questions: 0Answers: 0
    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.
  • allanallan Posts: 61,446Questions: 1Answers: 10,054 Site admin
    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
  • ikselaiksela Posts: 13Questions: 0Answers: 0
    Hello Allan,
    Do you when/if a fix will be available for this issue?

    Thanks!
  • allanallan Posts: 61,446Questions: 1Answers: 10,054 Site admin
    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
  • ikselaiksela Posts: 13Questions: 0Answers: 0
    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
  • 0a0d0s00a0d0s0 Posts: 7Questions: 0Answers: 0
    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
This discussion has been closed.