Search code examples
javascriptjquerydatatablestabletools

TableTools not loading on a DataTables Table


The datatables works fine however I am trying to add TableTools and I am having issues. With what I am using the data tables works fine as intended with no issues at all, however trying to add tabletools to it has had no success. There are no console errors reported with what I am doing yet nothing displays. This leads me to believe I am doing something wrong in the code. I have put the code below.

The script includes:

        <script src="//cdn.datatables.net/1.9.4/js/jquery.dataTables.js"></script>
        <script src="//cdn.datatables.net/tabletools/2.2.0/js/dataTables.tableTools.js"></script>
        <script src="//tinymce.cachefly.net/4.0/tinymce.min.js"></script>
        <link rel="stylesheet" href="//cdn.datatables.net/tabletools/2.2.0/css/dataTables.tableTools.css" type="text/css" media="all" />

I am using the following code:

        var foreTable = $(".cscf-fore-table").dataTable({dom: \'T<"clear">lfrtip\',
            tableTools: {
                "sSwfPath": "//cdn.datatables.net/tabletools/2.2.0/swf/copy_csv_xls.swf",
                "aButtons": [
                "copy",
                "csv",
                "xls",
                "print"
                ]
            },
                "bSort": false,"aLengthMenu": [
                [25, 50, 100, 200, -1],
                [25, 50, 100, 200, "All"]
                ],
            "iDisplayLength":-1, "bJQueryUI":true, "sPaginationType":"full_numbers"});  

Solution

  • First, the fiddle you forked does not work because you import tabletools.js / .css before dataTables.js and .css.

    The main reason for tableTools not working for you is a mix between the 1.10.x camelcase naming convention and the 1.9.x hungarian notation. You have probably done some kind of upgrading / copypaste from examples? You have :

    dataTable({
       dom: 'T<"clear">lfrtip',
    

    But dom was named sDom prior to 1.10.x. In 1.10.x you can use both dom and sDom, but dataTables 1.9.4 does only know sDom. Simply change to

    dataTable({
       sDom: 'T<"clear">lfrtip',
    

    Thats why there were no errors in the console. TableTools was never initialized, your entire dom-declaration was ignored.

    See the fiddle forked again, now working - dataTables 1.9.4 and tableTools 2.2.2 -> http://jsfiddle.net/7ng9wfak/