TableTools Buttons only work on the first DataTable

iandawg

http://debug.datatables.net/ahizel

I have a page that initializes two DataTables using this code:

[code]
$('#FedExSalesOverview').dataTable({
"sDom": 'T<"clear">lfrtip',
"oTableTools": {
"sSwfPath": "../../Content/TableTools-2.0.0/media/swf/copy_cvs_xls_pdf.swf"
},
...
$('#FedExSalesDetails').dataTable({
"sDom": 'T<"clear">lfrtip',
"oTableTools": {
"sSwfPath": "../../Content/TableTools-2.0.0/media/swf/copy_cvs_xls_pdf.swf"
},
...
[/code]

Both use supply the same value for the "oTableTools" parameter. The "copy", "csv", "Excel", "PDF" and "Print" buttons work on the first table ('#FedExSalesOverview'). The buttons appear, but don't do anything on the second table ('#FedExSalesDetails'). Both tables have Sort, Search and other features enabled, and those features work on both tables.

There's an error in the JS console : "uncaught exception: Unable to load SWF file - please check the SWF path"

I've tried to Initialize TableTools "globally" and then apply the tools using sDom, but I don't quite understand how this method works - I just read another blog post about this issue (http://datatables.net/forums/discussion/3963/tabletools-on-multiple-tables/p1) When I do this, I get the same result :

[code]
$(document).ready(function () {
TableTools.DEFAULTS.aButtons = ["copy", "csv", "xls", "pdf"];
TableTools.DEFAULTS.sSwfPath = "../../Content/TableTools-2.0.0/media/swf/copy_cvs_xls_pdf.swf";

$("#tabs").tabs();
$('#FedExSalesOverview').dataTable({
"bJQueryUI": true,
"sDom": '<"H"Tfr>t<"F"ip>',
...
[/code]
As you can see, I'm using jQuery.tabs() and I have the HTML for the DataTables on separate tabs.

allan

> As you can see, I'm using jQuery.tabs() and I have the HTML for the DataTables on separate tabs.

That's the key bit - that in combination with the fact that you are using TableTools 2.0.0.

Basically the issue is that when TableTools is initialised it tries to size the Flash buttons to match the HTML buttons. But if the table is in a display:none element, as your second table in the tab is, then it has no dimensions and thus that will fail (or rather get 0x0).

The way to fix this is to call the fnResizeButtons API method ( http://datatables.net/extras/tabletools/api#fnResizeButtons ) when the tab is displayed (I think it's the 'show' event in jQuery UI).

Allan

iandawg

Allan,

The solution makes sense, but I can't get the oTableTools.fnResizeButtons(); function to work, (JS Console Error: oTableTools.fnResizeButtons is not a function). This is the code I used:

[code]
$("#tabs").tabs({
"show": function (event, ui) {
var table = $.fn.dataTable.fnTables(true);
if (table.length > 0) {
var oTableTools = TableTools.fnGetInstance(table[0]);
$(table).dataTable().fnAdjustColumnSizing();
if (oTableTools != null) {
alert("got an oTableTools object!");
oTableTools.fnResizeButtons();
alert("buttons should work");
} else {
alert("oTableTools == null");
}
}
}
});
[/code]

You can see that it is similar, though not identical to the code in the example you reference. I can see that I do get the oTableTools object, but the functions aren't bound to it.

Ian

iandawg

I noticed that the .fnResizeButtons function wasn't available till TableTools 2.0.1. I upgraded to v2.1.2, but now none of the buttons work. There aren't any JS Console errors, and interestingly enough, the "Print" button works, but the other ones don't.

http://debug.datatables.net/agawog

allan

Unfortunately 2.1.2 has a collections error in it :-(. See this thread: http://datatables.net/forums/discussion/10721 . 2.1.3 will be out at the start of next week and should fix all known bugs.

Allan

iandawg

I was wondering if you had an ETA on the new TableTools release?

allan

Yeah sorry - really busy time at the moment and I'm getting pulled all over, so its a bit delayed. I really hope to do it sometime this weekend.

Allan

iandawg

I installed the new version of TableTools (2.1.3). I'm calling the .fnResizeButtons() method on the .tabs() "show" event, but the buttons still don't work. I don't get any errors, but the only button that does anything is the print button. Any ideas?

wjgilmore

FWIW I am experiencing the same issue, the print button is the only button of the set which works. The buttons otherwise display just fine, Firebug does not log any errors when the page loads nor when a button is pressed, and the copy_csv_xls_pdf.swf file is indeed accessible. This is for an internal project and it's not possible for me to easily recreate the code for public viewing, however I just wanted to throw in a "me too" in terms of experiencing this problem. FWIW I've called .fnResizeButtons(), and it has no affect in terms of resolving the problem.

allan

Can you link me to an example showing the problem please?

Allan

iandawg

http://fxoreport.asap4color.com
username: FXOReport
password: reports123

tny1234

is there any example that doesn't include JQUERY TABS!!! for instance i use buttons that toggle divs i have 4 divs on a page, each with a table.. I apply the class hiddenDiv to unseen divs and vissibleDiv to seen div.. only the first viewable div works.. I've have even gone as far ass looking into alternative's to tabletools and datatables but they keep comming up in google so im stuck trying to figure out this code..

how would one apply the fix to a standard implimentation of table tools without jquery tabs, and first run the div is hidden?

thanks in advance

allan

@tny1234 - Please do not cross post ( http://datatables.net/forums/discussion/12001 )! The instructions at the top of the new conversation page explicitly say this!

allan

@iandawg - Can't load the page I'm afraid. Looks like the name isn't resolving :-(.

Allan

iandawg

@allan - Try to load the page again...

jefffan24

Just so you know when I try to go to the page it says I need to login, might want to give a dummy login or something.

allan

Thanks for the login details - it loads now. The problem is the same as the one described in this thread, with my answer: http://datatables.net/forums/discussion/5859/tabletool-problem-when-hiding-datatable_wrapper/p1#Item_2

Allan

iandawg

Allan,

I don't know what I'm missing. I'm using nearly the exact code you mention in the answer on that other thread:
[code]
$("#tabs").tabs({
"show": function (event, ui) {
var table = $.fn.dataTable.fnTables(true);
if (table.length > 0) {
$(table).dataTable().fnAdjustColumnSizing();
var oTableTools = TableTools.fnGetInstance(table[0]);
if (oTableTools != null && oTableTools.fnResizeRequired()) {
oTableTools.fnResizeButtons();;
}
}
}
});
[/code]

I updated to the latest libraries (DataTables 1.9.4 and TableTools 2.1.4)