Tabletools new initialisation and SWF path

Tabletools new initialisation and SWF path

neburtonneburton Posts: 58Questions: 5Answers: 0
edited October 2014 in TableTools

I'm trying to implement tabletools 2.2.3 with datatables 1.10.2 initialising with new as follows:

subproductstable = $('#subproductstable').DataTable( );
 var subproductstabletabletools = new $.fn.dataTable.TableTools(subproductstable);    
$(subproductstabletabletools.fnContainer()).insertAfter('#subproductstable');

The buttons appear on the table, but the CSV, XLS and PDF buttons have no effect.

I noticed there is no way to set the SWF path with the new initialisation? Does Tabletools assume a certain path to these files and is there a way to set this?

Thanks :)

Replies

  • tangerinetangerine Posts: 3,095Questions: 24Answers: 363

    I don't know what you mean by "new initialisation". AFAIK the initialisation for TableTools has not changed, and it certainly needs your SWF path.

  • allanallan Posts: 54,572Questions: 1Answers: 8,534 Site admin

    The second parameter for the constructor is the TableTools options object (i.e. oTableTools or tableTools in the DataTables options).

    For example:

    subproductstable = $('#subproductstable').DataTable( );
     var subproductstabletabletools = new $.fn.dataTable.TableTools(subproductstable, {
      sSwfPath: "..."
    } );    
    $(subproductstabletabletools.fnContainer()).insertAfter('#subproductstable');
    

    Allan

  • neburtonneburton Posts: 58Questions: 5Answers: 0

    Ah, I did try that previously and it didn't work. Just tried it again and still no go. Anything else that might stop this working? I've tried on different browsers. The buttons are displaying, just not firing. Can't see anything in firebug.

    My swf folder is a subdirectory of the root folder.

    var subproductstabletabletools = new $.fn.dataTable.TableTools(subproductstable,
    {
        sSwfPath: "swf/copy_csv_xls_pdf.swf"
    });
          
    $(subproductstabletabletools.fnContainer()).insertAfter('#subproductstable');
    
  • neburtonneburton Posts: 58Questions: 5Answers: 0

    The datatable is displayed in a JQueryUI Dialog. I've extracted the table, run it on a test page and it works fine. Just doesn't work in the dialog. Are zero opacity flash buttons overlayed on the real buttons??? Just wondering if there's a z-index issue or something? Not sure how these tabletools buttons work.

  • allanallan Posts: 54,572Questions: 1Answers: 8,534 Site admin

    Are zero opacity flash buttons overlayed on the real buttons?

    Yes

    Just wondering if there's a z-index issue or something?

    Possibly, although unlikely.

    I'd need a link to the page to be able to debug and say what is going wrong.

    Allan

  • neburtonneburton Posts: 58Questions: 5Answers: 0

    It's on an intranet, so is tricky. I'll do some more digging myself. Thanks Allan :)

  • neburtonneburton Posts: 58Questions: 5Answers: 0

    Think I've figured it out, having set up a test page with a single datatable in a dialog (which works) and my original dialog which does not. I neglected to say the datatable is on a tab in a dialog. The tab is not visible when the datatable is initialised. I'm guessing the fact it's hidden is the problem. Any way around this i.e. applying the tabletool when the tab becomes visible or something?

  • neburtonneburton Posts: 58Questions: 5Answers: 0

    These are JQueryUI dialogs and tabs

  • neburtonneburton Posts: 58Questions: 5Answers: 0
    edited October 2014

    Figured it out with an example for the fnResizeButtons method here : http://datatables.net/extensions/tabletools/api

    Needed to adjust the example to reflect the deprecated "show", which becomes "activate" in the current JqueryUI build :

    $(".tabs").tabs( 
    {
    activate : function(event, ui) 
    {
    var jqTable = $('table', ui.panel);
    if ( jqTable.length > 0 ) {
    var oTableTools = TableTools.fnGetInstance( jqTable[0] );
    if ( oTableTools != null && oTableTools.fnResizeRequired() )
    {
    /* A resize of TableTools' buttons and DataTables' columns is only required on the
    * first visible draw of the table
    */
    jqTable.dataTable().fnAdjustColumnSizing();
    oTableTools.fnResizeButtons();
    }
    }
    }
    } );
    
  • allanallan Posts: 54,572Questions: 1Answers: 8,534 Site admin

    I neglected to say the datatable is on a tab in a dialog

    Ah yes - key point. Your method of using fnResizeButtons when the table is shown is the correct answer :-)

    Thanks for the pointer about the update to the jQuery UI API. I've corrected it locally and will deploy a site update later today.

    Allan

  • chopstikchopstik Posts: 14Questions: 5Answers: 0

    Had the same issue with Bootstrap tabs. Here's the JS I used to redraw and allow the CSV/PDF downloads to proceed:

    $('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
        var targetPane = $(e.target).attr('href');
        
        $(targetPane+' table').each(function( index ) {
          var jqTable = $(this);
          var oTableTools = TableTools.fnGetInstance( jqTable[index] );
          if ( oTableTools != null && oTableTools.fnResizeRequired() )
          {
            jqTable.dataTable().fnAdjustColumnSizing();
            oTableTools.fnResizeButtons();
          }
        });
       });
    
This discussion has been closed.