TableTools buttons not working (except Print) on one table.

AndyF

I have used dataTables and tableTools in an application that uses tabs to show a few different tables. I got the first table to work independently then moved on to the second one. This one automatically had all the same settings and thus worked perfectly. The third one however, doesn't let me click any other button except print (dataTables still works fine, just not tableTools).

I know the main issue is normally the file path to the swf file, but I have set this and it works on the other two tables, (I can download as pdf etc) so surely that isn't the issue.

Something to note is I get four of these errors in my console when I open the third tab/table, yet the other tables do not give this error.
[code]SCRIPT438: Object doesn't support property or method 'clearText'
ZeroClipboard.js, line 306 character 5[/code]

I had to manually include ZeroClipboard.js to get the first table working, as it wasn't working before that (not sure if this affects anything)

Update: After more testing it isn't necessarily the 3rd table that doesn't work. It seems that when I control f5, the first table I try to use the buttons on will work, and so will the second, but the 3rd will not work, regardless of what order I try them in. I can only assume this is an issue with my javascript?

AndyF

Still haven't fixed this, has anyone had something similar?

allan

After the SWF loading issue, the second most common issue which leads to this is that the table is in a display:none container when it is initialised, thus it has no height and width, thus the buttons can't be sized and they therefore can't be clicked.

When you make the element visible you need to call fnResizeButtons: http://datatables.net/extras/tabletools/api#fnResizeButtons

Failing that, please give us a link :-)

Allan

AndyF

I'm working on an intranet so I can't give you a link, sorry. I tried your fix but it didn't help, the mouse turns to a pointer when hovered over the buttons so they are full size and clickable, but they just dont react to a click. Any other ways i can troubleshoot?

oyun

before looking to this thread I have spent 2 hours figuring out what to do (

Here is my hack:
change flash creation art in _fnCreateButton function from
[code]
if ( oConfig.sAction.match(/flash/) )
{
this._fnFlashConfig( nButton, oConfig );
}
[/code]
to
[code]
if ( oConfig.sAction.match(/flash/) )
{
var that = this;
var initFlash = function() {
that._fnFlashConfig(nButton, oConfig);
};
if(!$(that.dom.table).is(':visible')) {
var functionWaitAndRun = function() {
var id = window.setInterval(function() {
if (!$(that.dom.table).is(':visible')) {
return;
}
initFlash();
window.clearInterval(id);
}, 500);
};

functionWaitAndRun();
} else {
initFlash();
}
}

[/code]
dirty, but will work even if you will forget about this issue.
Maybe we could set this loop somewhere else for entire plaggin, not for each "flash" button.

Small update: moved this hack to constructor at the end of _fnConstruct
[code]
var $element = $(this.dom.table);
if (!$element.is(':visible')) {
var functionWaitAndRun = function() {
var id = window.setInterval(function() {
if (!$element.is(':visible')) {
return;
}
if (that.fnResizeRequired()) {
/* A resize of TableTools' buttons and DataTables' columns is only required on the
* first visible draw of the table
*/
$element.dataTable().fnAdjustColumnSizing();
that.fnResizeButtons();
}
window.clearInterval(id);
}, 500);
};

functionWaitAndRun();
}

[/code]

AndyF

That didn't work for me, Oyun, or at least not the first 2, I wasn't sure how the 3rd one would be set up (new to JS)

but thanks for the reply anyway! Glad it worked for you.