Tabletools buttons do not display

pgarner

I've just become aware of DataTables and added it to my WP installation. Got it working fine by following the simple instructions at http://www.datatables.net/blog/Getting_started_with_DataTables%3A_First_steps. Decided to add TableTools using the following code:

[code]



$(document).ready(function() {
$('#cemetracDataTable').dataTable( {
"sDom": 'T<"clear">lfrtip',
"oTableTools": {
"sSwfPath": "http://versatrax.com/wp-content/DataTables-1.9.4/extras/TableTools/media/swf/copy_csv_xls_pdf.swf"
}
} );
} );
[/code]

but the buttons don't display on either Chrome Version 32.0.1700.72 m or Firefox 26.0. However, the buttons do display at http://www.datatables.net/extras/tabletools on both browsers. Also, when I used the WP TablePress-DataTables-TableTools extension on the same WP installation the buttons did display. So it would seem that the theme is not causing the problem. Prior to beginning to use DataTables I removed the TablePress plugin. I did double check to ensure that http://versatrax.com/wp-content/DataTables-1.9.4/extras/TableTools/media/swf/copy_csv_xls_pdf.swf" exists. The following also does not help:

[code]
$(document).ready(function() {
$('#cemetracDataTable').dataTable( {
"sDom": 'T<"clear">lfrtip',
"oTableTools": {
"aButtons": [ "copy", "print" ]
}
} );
} );

[/code]

I'm not seeing any JavaScript errors in the console. Not quite sure what to try next. Any ideas you have would be greatly appreciated.

Here's the page with the problem: http://www.versatrax.com/find-a-grave-site/
Here's the DataTables debug bookmarklet code: oxoxut and link http://debug.datatables.net/oxoxut

tangerine

If you look at the debugger, it says "TableTools Not installed".
TableTools is an "extra". You're supposed to download it and include it in your HTML.

pgarner

Wait, what? Not sure what you mean by "include it in your HTML." I don't see what you're talking about in the TableTools documentation e.g.

http://www.datatables.net/extras/tabletools/
http://www.datatables.net/extras/tabletools/examples
http://www.datatables.net/extras/tabletools/initialisation
http://www.datatables.net/extras/tabletools/api
http://www.datatables.net/extras/tabletools/plug-ins

So, I downloaded TableTools and took a stab in the dark:

[code][\code]

but unfortunately this did not resolve the issue. What HTML am I supposed to include or better yet where is the documentation so that I don't make the same mistake next time I use an extra? Thanks!

allan

I'll need to include ZeroClipboard.js as well I think - otherwise you'll be getting a JS error?

This is most certainly a weak point in the documentation and some I'm working on resolving.

Allan

tangerine

Maybe I should have said "...include a reference to it..." . I thought that would have been obvious when using external js files.

pgarner

This doesn't work:



http://debug.datatables.net/obepuv

What was confusing to me as I began to learn how to use DataTables was the existence of this file, which made it seem as tho' TableTools was supported out of the box:

http://versatrax.com/wp-content/DataTables-1.9.4/extras/TableTools/media/swf/copy_csv_xls_pdf.swf

I'm trying to understand why it exists, if it's only used with an extra (in this case TableTools) installation

http://versatrax.com/wp-content/TableTools-2.1.5/media/swf/copy_csv_xls_pdf.swf

As an aside, I'm probably going to have this same type of issue as I add more extras. Is there a thumb rule to go by as I move forward, when trying to figure out what JavaScript file to source? Here, for example, is my new code. I added column filtering, guessing that the file I needed to include was jquery.dataTables.columnFilter.js and it worked properly e.g.


[code]





$(document).ready(function() {
$('#cemetracDataTable').dataTable( {
"sDom": 'T<"clear">lfrtip',
"oTableTools": {
"sSwfPath": "http://versatrax.com/wp-content/TableTools-2.1.5/media/swf/copy_csv_xls_pdf.swf"
}
} ).columnFilter();
} );

[/code]

Incidentally, although I got ColumnFilter to work I did not see an entry for ColumnFilter when I reran the debug bookmarklet

http://debug.datatables.net/iduges

So, as I move forward, what is the best approach to figuring out what JavaScript to source as I add extras?

Regarding TableTools, which is still not working, my choices are as follows:

TableTools.js
TableTools.min.js
ZeroClipboard.js

pgarner

Oh, wait. I re-read @allan's remark about including ZeroClipboard.js as well. "As well" means I should have included both.




This works :-)

http://debug.datatables.net/iwajon

I just need to figure out how to get the buttons to display properly. They're bunched up on the left side.

http://www.versatrax.com/find-a-grave-site/


Thanks for your help.

tangerine

You need to incorporate the stylesheet TableTools.css, which should be included in the download.
Not sure whether there's anything else though.

allan

TableTools is unusual in that it depends upon ZeroClipboard. No other 'extra' has any dependency other than DataTables. I'm going to resolve that issue in TableTools in future.

Allan

pgarner

Sweet the stylesheet fixed the button display issue. Thanks y'all.