Tabletools new initialisation and SWF path

neburton

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 :)

tangerine

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.

neburton

http://www.datatables.net/release-datatables/extensions/TableTools/examples/new_init.html

allan

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

neburton

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');

neburton

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.

allan

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

neburton

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

neburton

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?

neburton

These are JQueryUI dialogs and tabs

neburton

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();
}
}
}
} );

allan

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

chopstik

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();
      }
    });
   });