Tabletools buttons do not display

Tabletools buttons do not display

pgarnerpgarner Posts: 8Questions: 0Answers: 0
edited January 2014 in TableTools
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

Replies

  • tangerinetangerine Posts: 3,342Questions: 35Answers: 394
    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.
  • pgarnerpgarner Posts: 8Questions: 0Answers: 0
    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!
  • allanallan Posts: 61,438Questions: 1Answers: 10,050 Site admin
    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
  • tangerinetangerine Posts: 3,342Questions: 35Answers: 394
    Maybe I should have said "...include a reference to it..." . I thought that would have been obvious when using external js files.
  • pgarnerpgarner Posts: 8Questions: 0Answers: 0
    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
  • pgarnerpgarner Posts: 8Questions: 0Answers: 0
    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.
  • tangerinetangerine Posts: 3,342Questions: 35Answers: 394
    You need to incorporate the stylesheet TableTools.css, which should be included in the download.
    Not sure whether there's anything else though.
  • allanallan Posts: 61,438Questions: 1Answers: 10,050 Site admin
    edited January 2014
    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
  • pgarnerpgarner Posts: 8Questions: 0Answers: 0
    Sweet the stylesheet fixed the button display issue. Thanks y'all.
This discussion has been closed.