TableTools not working with JQuery UI Accordion

Taylor514ce

I have three tabs, each tab has three accordions, and the bottom accordion in each will contain a datatable.

I started with just a basic HTML containing only a single datatable, and got it working correctly.

I added Tabs, all still good.

But when I add accordion, the TableTools buttons stop working. I've seen various threads on this issue but have not found a clear, repeatable solution.

Taylor514ce

Here is my document.ready function...
[code]
$(document).ready(function() {


myTable = $('#box-table-a').dataTable( {
"bProcessing": false,
"bJQueryUI": true,
"sDom": '<"H"f>t<"F">T',
"sScrollY": "410px",
"sAjaxSource": "http://<!--SERVERURL-->/formatLog.txt",
"bPaginate": false,
"bFilter": true,
"bAutoWidth": false,
"aoColumns": [null, null, null, { "sWidth": "80%" }, {"bVisible": true} ],
"aaSorting": [[4,'desc']],
"oTableTools": {
"sSwfPath": "http://<!--SERVERURL-->/loadTableTools",
"aButtons": [ "copy","csv","xls",
{
"sExtends": "pdf",
"sPdfOrientation": "landscape",
"sPdfMessage": "PlanetPress Activity Log"
},"print"]
}
} );

// Accordion
$("#accordion").accordion({ header: "h3", active: 0, autoHeight: false });

// Tabs
$('#tabs').tabs();


} );
[/code]

Everything displays correctly, but the TableTools Flash buttons do not hover or trigger any events. If I remove the Accordion, they work correctly, so I know my SWF path is correct. I can paste my complete markup if required.

snarf2larf

Try running fnResizeButtons when the table is shown.

http://datatables.net/extras/tabletools/api#fnResizeButtons

Taylor514ce

Yes, I found that and have been trying to apply it, but not with any positive results. It isn't clear to me where to place that... I have tried altering my document.ready function:

[code]
$(document).ready(function() {


myTable = $('#box-table-a').dataTable( {
"bProcessing": false,
"bJQueryUI": true,
"sDom": '<"H"f>t<"F">T',
"sScrollY": "410px",
"sAjaxSource": "http://<!--SERVERURL-->/formatLog.txt",
"bPaginate": false,
"bFilter": true,
"bAutoWidth": false,
"aoColumns": [null, null, null, { "sWidth": "80%" }, {"bVisible": true} ],
"aaSorting": [[4,'desc']],
"oTableTools": {
"sSwfPath": "http://<!--SERVERURL-->/loadTableTools",
"aButtons": [ "copy","csv","xls",
{
"sExtends": "pdf",
"sPdfOrientation": "landscape",
"sPdfMessage": "PlanetPress Activity Log"
},"print"]
}
} );

// Accordion
//$("#accordion").accordion({ header: "h3", active: 0, autoHeight: false });


$("#accordion").accordion( {
header: "h3", active: 0, autoHeight: false,
"show": function(event, ui) {
var jqTable = $('table.display', ui.panel);
if ( jqTable.length > 0 ) {
var oTableTools = TableTools.fnGetInstance( jqTable[0] );
if ( oTableTools != null && oTableTools.fnResizeRequired() )
{
jqTable.dataTable().fnAdjustColumnSizing();
oTableTools.fnResizeButtons();
}
}
}
} );

// Tabs
$('#tabs').tabs();


} );


[/code]

But this has no effect. The flash buttons show but do not function.

snarf2larf

It doesn't look like accordion has a "show" event like tabs does. You can try "change". I would put in some console.logs or alerts to see if the selectors are finding the right table and even running fnResizeButtons().

Taylor514ce

This is definitely the "known issue" with the table being hidden initially and the buttons needing to be redrawn. I have three tabs, each tab has three accordions, and the third accordion will (eventually) contain a datatable. For right now, just the first tab is coded.

If I set the page so that the accordion holding the datatable is active, so that the datatable is visible on initial load, the Flash buttons in the TableTools work.

It's only when that table is hidden (either initially or through expanding and collapsing the accordion), the buttons fail.

So we're on the right track, but I cannot find the correct event to code. I tried "changestart" instead of "show" and will keep looking, but wanted to post in the hopes someone has already solved the issue and wants to share the solution.

Thanks.

Taylor514ce

A related question, in my ongoing efforts with this...

[code]
$("#tabs").tabs( {
"show": function(event, ui) {
var jqTable = $('table.display', ui.panel);
if ( jqTable.length > 0 ) {
var oTableTools = TableTools.fnGetInstance( jqTable[0] );
if ( oTableTools != null)
{
jqTable.dataTable().fnAdjustColumnSizing();
oTableTools.fnResizeButtons();
}
}
}
} );
[/code]

The line: var jqTable = $('table.display', ui.panel);

That finds the Datatable within the ui.panel created by the Tab, but if the Tab contains an Accordion, and the Accordion contains the Datatable, what change would I make to find the table?

Taylor514ce

I've re-written to:

[code]
$("#accordion").accordion( {
"change": function(event, ui) {
var jqTable = $('table.display', ui.newContent);
if ( jqTable.length > 0 ) {
var oTableTools = TableTools.fnGetInstance( jqTable[0] );
if ( oTableTools != null)
{
jqTable.dataTable().fnAdjustColumnSizing();
oTableTools.fnResizeButtons();
}
}
}
} );
[/code]

However, this still doesn't find the datatable... jqTable.length remains "0".

snarf2larf

Since I was bored.. See:

http://bay13box.com/datatables/test.htm

The datatables table is in tab 2 at the bottom. Works for me. You should be able to figure out your own implementation from the source.

Taylor514ce

The issue boils down to resolving the datatable object.

This line:

[code]
var jqTable = $('table.display', ui.panel);
[code]

Simply doesn't work for me... FireBug shows [], an unnamed object with length = 0

When I alter to use my global variable for the specific table:

[code]
var jqTable = myTable;
[code]

It of course works, but that isn't dynamic. If I have multiple tabs/accordions/tables, I need the event function to resolve to just that accordion's table. I see your example and of course it works, but I'm not sure what the difference might be, other than that you haven't assigned your datatable to a global variable.

Taylor514ce

Actually, your example is having the same issue as mine. Only the "Clipboard" button works, and it copies "-1 rows". The Excel, CSV, and PDF buttons do not function.

snarf2larf

I assigned the table to a global variable and it still works. Are you using the same versions of JQuery, JQ UI, datatables & table tools as I listed?

I don't know why it would work in my example but not on yours. Can you post up a link at all to mess with?

snarf2larf

[quote]Taylor514ce said: Actually, your example is having the same issue as mine. Only the "Clipboard" button works, and it copies "-1 rows". The Excel, CSV, and PDF buttons do not function.[/quote]

Weird. It works in Chrome. I didn't try it in Firefox or IE but it appears it does not work properly in either of those browsers. Let me see if I can fix it.

Taylor514ce

IE and Chrome work, FireFox is having the issue. I'm also concerned that this is coded to an accordion event and not tabs... if I have the datatable accordion "open" on several tabs, and then move from tab to tab... will TableTools still work? IE and Chrome appear fine with this too, but FireFox remains the odd one out.

snarf2larf

I tried a few things and was not able to resolve the problem without creating additional problems. The only thing that appears to consistently work in Firefox is destroying and then recreating the datatable which is obviously not a elegant solution.

Taylor514ce

I appreciate all of your assistance. Thanks.

toneill2000

Thank you all for the post here as I was tearing out my hair all day long wondering why the Flash output would not show up. I have a situation where would really like to be able to output the data from a data table that is embedded in a JQuery accordion. Are there any alternative solutions to this problem? The only ugly work around is to scrap all my accordions but than I have to change a ton of stuff on my site. Any help would be so appreciated. Thank you.

snarf2larf

As mentioned above the only way I could find to fix it was to destroy and recreate the table on each accordion change which is a HORRIBLE solution. I would try the new version of TableTools just released and see if that helps at all.

The destroy / create example is here: http://bay13box.com/datatables/test.htm

toneill2000

@snarf2larf: Yes, I tried your example verbatim with the only change being that my datatable is a class instead of an ID because I have multiple tables on the same page. I'm getting an error back that I've pasted below from both IE and Chrome. Also, I've pasted my JQuery code too. Any help is appreciated. Thanks.

Dialog Error when trying to display table:
[quote]DataTables warning (table id = 'DataTables_Table_1):
Cannot reinitialise DataTable.
To Retrieve the DataTables object for this table, pass no arguments or see the docs for bRetrieve and bDestroy[/quote]

JQuery code:
[code]
QueryDataTable').dataTable( {
"sDom" : 'T<"clear">lfrtip',
"oTableTools" : {
"sSwfPath" : "cms/swf/copy_cvs_xls_pdf.swf"
}
});

$('#accordionProduct').accordion( {
change : function(event, ui) {
oTable.fnDestroy();
oTable = $('.slimJQueryDataTable').dataTable( {
"sDom" : 'T<"clear">lfrtip',
"oTableTools" : {
"sSwfPath" : "cms/swf/copy_cvs_xls_pdf.swf"
}
});
}
});
[/code]