Table Tools 2.0.1 - multiple tables, with each table inside a tab

mg

I'm familiar with the Table Tools example showing multiple tables on a single page.
http://datatables.net/release-datatables/extras/TableTools/multiple_tables.html
(By the way, shouldn't the Initialisation code in the example grab the table by the
class name instead of the id name in order to work on multiple tables?)

And I'm familiar with the discussion of "Table Tools on multiple tables".
http://datatables.net/forums/comments.php?DiscussionID=3963

It doesn't seem to me that this problem has been resolved.

Here's how I'm encountering the problem at the moment.
I have 4 tables on a single page. When I show all the tables
at the same time, sure, the table tools buttons work for
each separate table, just like the example works.

However, once I put each table in its own separate "tab" div,
where the first tab is displayed when the page loads, and the
other three tabs are hidden until the tab links are clicked,
then the problems begin. The table in the first displayed
tab works: the table tools buttons can hover and can do print actions.
The tables in each of the hidden tabs, once they become the active tabs,
do NOT work. The button hover and the button clicking actions do nothing.

Has anyone come across this problem and found a fix for this?
The one forum posting shows a user had to resort to ajax to call each table,
and that seems pretty kludgy to me.

mg

I think the whole problem has to do with the table being inside
a div that is initially hidden from display, because if I use Table Tools on only 1 table,
and the table is inside a hidden div, then Table Tools
does NOT work on the 1 table when the hidden div display property changes.

jd0000

i have this exact same setup/problem ... did you ever get it figured out?

Gust

What to do?

Exact same thing...

Gust

morrty

Same problem here, exact same setup with 4 tables and 4 tabs each table is in a seperate tab. First table works but the rest will only work with the print function and not copy/xls/csv

amurdock

This works for me...
[code]
$(document).ready(function(){
var oTable = $('.datatable').dataTable(tableLayout);
});
[/code]

And then add the tabs in the window ready function.

[code]
$(window).ready(function(){
$(".tabs").tabs();
});
[/code]

efranceschi

Same problem here!

I'm loading the tab content using ajax. Anyone are using ajax to retrieve the tab content too ?

I've found a message in firebug's console, pointing to ZeroClipboard.js line 133:

[code]
this.domElement.parentNode.appendChild(this.div);
[/code]

Error message:
[code]this.domElement.parentNode is null[/code]

When trying to safe call appendChild() method, the buttons doesn't work as expected.

[code]
if (this.domElement.parentNode != null) {
this.domElement.parentNode.appendChild(this.div);
}
[/code]

JamesA

Not sure if this would apply with multiple tables on the same page in tabs, but I ran into this error while updating a div with a new datatable when that div previously contained a datatable with Table Tools. I found that when I cleared the ZeroClipboard variable before initializing a new table, that fixed it for me.

[code]
if(ZeroClipboard){
var ZeroClipboard; // If exists clear previous clipboard
}
[/code]

efranceschi

Hi JamesA!

Doesn't worked for me. Same error.

JamesA

Sorry efranceschi I spoke to soon. I am still having the same issue as well. I have tried something similar to what you did in ZeroClipboard.js in the TableTools.js by changing line 1226 to:

[code]
if ( document.getElementById(id) && (node.parentNode) )
[/code]

I do get rid of the error, however I also cause the CSV and Excel buttons do not always function. The Copy button seems to always work though. (I am not using the PDF/Print buttons)

PWright

I, too, am running into this error.

I am using fnDestroy() then creating a new table and using DataTables again without refreshing the page. Has anyone had any luck fixing this issue?

One additional note is that this is not a problem if I do not attempt to use the save functionality of TableTools. The problem only occurs after I have saved something.

How I am removing Data Tables:

[code]oTable = $('#example').dataTable();
oTable.fnDestroy();
$("#example").remove();[/code]

PWright

Ok, I have solved *my* problem, maybe my solution will help you!

What was happening was that there were divs being inserted into the table with class "DTTT_collection" **and** into the body of the page outside of the table (for the collections popup). My code above was destroying the table, but not these extra popup collections. So, I added:

[code]$('.DTTT_collection').remove();[/code]

After the code above, and now it works. I have no idea why.

ahmed_alanany

Here my solution of this problem:
I have 11 tabs in one page. Every one includes a jquery data table the csv exporting works fine in the first tab only
I tried this solution and it works fine :)
[code]
$j( "#tabs" ).tabs({
"select": function(event, ui) {
var dTable = $j('.data-table', ui.panel).dataTable();
if ( dTable.length > 0 ) {
iniDataTable(dTable);
}
}
});
[/code]
iniDataTable() function
[code]
/**
* iniDataTable
*/
function iniDataTable(dTable){
//destroy first
dTable.fnDestroy();
//reinitialize datatable
dTable.dataTable({
"iDisplayLength": 20,
"bJQueryUI": true,
"bSort": false,
"bJQueryUI": true,
"sDom": '<"H"Tfr>t<"F"ip>',
"oTableTools": {
"sRowSelect": "single",
"sSwfPath": "../js/copy_cvs_xls_pdf.swf",
"aButtons": [
{
"sExtends": "csv",
"sCharSet": "utf8",
"sFieldBoundary": '"',
"bBomInc": true,
"sButtonText": "CSV"
},
{
"sExtends": "print",
"sInfo": "Please press escape when done",
"sButtonText": "Print",
"bSelectedOnly": true
}
]
}
}).css("width","100%");
}
[/code]

mangia

I'm using jquery tabs and I'm facing the same problem but only when I add sExtend section...

For example,

[code]
{
"sExtends": "collection",
"sButtonText": "Save",
"aButtons": [ "csv", "xls", "pdf" ]
}
[/code]

Peter_O_Brein

PWright solution worked for me..
$('.DTTT_collection').remove();

Same type of senario, destroy and recreate multiple tables on same page, on 2nd+ create - TableTools fails on Mozilla (fine in IE supprisingly). Couldnt find the DT destory function doesnt cascade down to its plugins extensions.

severin

i think i got to the root of this problem. it's in getDOMObjectPosition of the ZeroClipoard.js. This function tries to determine position and dimension of the element, the Flash-Movie is attached to. The problem is the used .width and .offsetWidth do not work on invisible Elements. i altered the function to check for visibility, and in case of non-visibility clone the element into a temporary div 200px outside of the window where it is visible, then do the dimension-retrieval on the clone and afterwards destroy both the temporary div and the cloned element. here's my new code for getDOMObjectPosition:

[code]
getDOMObjectPosition: function(obj) {

var info = Object();

// get absolute coordinates for dom element
if ($(obj).is(":visible")){ //obj.widht and obj.offsetWidth only work on visible elements
info = {
left: 0,
top: 0,
width: obj.width ? obj.width : obj.offsetWidth,
height: obj.height ? obj.height : obj.offsetHeight
};
} else {
//clone the object into a div outside of the window
var tempDiv = $('');
var objClone = $(obj).clone();
objClone.appendTo(tempDiv).appendTo($('body'));
//get the info needed
info = {
left: 0,
top: 0,
width: objClone.width ? objClone.width : objClone.offsetWidth,
height: objClone.height ? objClone.height : objClone.offsetHeight
};
//destroy the temporary objects
objClone.remove();
tempDiv.remove();

}

if ( obj.style.width != "" )
info.width = obj.style.width.replace("px","");

if ( obj.style.height != "" )
info.height = obj.style.height.replace("px","");

while (obj) {
info.left += obj.offsetLeft;
info.top += obj.offsetTop;
obj = obj.offsetParent;
}

return info;
}
[/code]

this works for me perhaps it's useful for you too.

manentia

Thanks so much!!!!

I had to make a small change to get this working with TableTools v2.1.2

[code]
getDOMObjectPosition: function(obj) {

var info = Object();

// get absolute coordinates for dom element
if ($(obj).is(":visible")){ //obj.widht and obj.offsetWidth only work on visible elements
info = {
left: 0,
top: 0,
width: obj.width ? obj.width : obj.offsetWidth,
height: obj.height ? obj.height : obj.offsetHeight
};
} else {
//clone the object into a div outside of the window
// -------------- CHANGE HERE -----------------
var tempDiv = $('');
// -------------- END CHANGE ------------------
var objClone = $(obj).clone();
objClone.appendTo(tempDiv).appendTo($('body'));
//get the info needed
info = {
left: 0,
top: 0,
// -------------- CHANGE HERE -----------------
width: objClone.width() ? objClone.width() : objClone.offsetWidth(),
height: objClone.height() ? objClone.height() : objClone.offsetHeight()
// -------------- END CHANGE ------------------
};
//destroy the temporary objects
objClone.remove();
tempDiv.remove();

}

if ( obj.style.width != "" )
info.width = obj.style.width.replace("px","");

if ( obj.style.height != "" )
info.height = obj.style.height.replace("px","");

while (obj) {
info.left += obj.offsetLeft;
info.top += obj.offsetTop;
obj = obj.offsetParent;
}

return info;
}
[/code]