Datatables TableTools multiple tables on the same page

Question

I am having problems with multiple instances of DataTables and TableTools on the same page. The DataTables are working fine, but when using TableTools only the first table is working fully with the buttons.

All buttons are appearing fine on all tables but when you click a button it does nothing. (apart from 'Print' button works on all 4 tables).

Does anybody have any ideas why this is happening? I have been searching for a solution but not found any.

<script type="text/javascript"> 
jQuery( function( $ ) {

// Implements the dataTables plugin on the HTML table
    var $acTable= $("#academic_table").dataTable( {
        "oLanguage": {
            "sSearch": "Filter:"
        },
        "oTableTools": {
            "sSwfPath": "swf/copy_csv_xls_pdf.swf",
            "aButtons": [
                "copy",
                "xls",
                "csv",
                "pdf",
                "print"
            ]
        },
        "bProcessing": true,
        "bServerSide": true,
        "sAjaxSource": "scripts/academic_serverside.php",
        "iDisplayLength": 10,       
        "bJQueryUI": false,
        "sPaginationType": "scrolling",
        "sDom": '<"clear"><"top"CTilr<"clear">pt>',
        "aoColumns": [ 
            {"bVisible":false},
            {"bVisible":true},
            {"bVisible":true},
            {"bVisible":true},
            {"bVisible":true},
            {"bVisible":true},
            {"bVisible":false}
        ],
        "fnRowCallback": function( nRow, aData, iDisplayIndex ) {
        $('td:eq(4)', nRow).html(''+ aData[5] +'&nbsp;'+ aData[6] +'');
        },
        "oColVis": {
            "activate": "mouseover",    
            "aiExclude": [0,6]
        }
        }).columnFilter({   
            aoColumns: [ 
                    { type: "select"},
                    { type: "text"},
                    { type: "select"},
                    { type: "select"},
                    { type: "select"},
                    { type: "text"},
                    { type: "text"}
                ]
        }); 



    // Implements the dataTables plugin on the HTML table
    var $buTable= $("#business_table").dataTable( {
        "oLanguage": {
            "sSearch": "Filter:"
        },
        "oTableTools": {
            "sSwfPath": "swf/copy_csv_xls_pdf.swf",
            "aButtons": [
                "copy",
                "xls",
                "csv",
                "pdf",
                "print"
            ]
        },
        "bProcessing": true,
        "bServerSide": true,
        "sAjaxSource": "scripts/business_serverside.php",
        "iDisplayLength": 10,       
        "bJQueryUI": false,
        "sPaginationType": "scrolling",
        "sDom": '<"clear"><"top"CTilr<"clear">pt>',
        "aoColumns": [ 
            {"bVisible":false},
            {"bVisible":true},
            {"bVisible":true},
            {"bVisible":true},
            {"bVisible":true},
            {"bVisible":true},
            {"bVisible":true},
            {"bVisible":true},
            {"bVisible":false}
        ],
        "fnRowCallback": function( nRow, aData, iDisplayIndex ) {
        $('td:eq(6)', nRow).html(''+ aData[7] +'&nbsp;'+ aData[8] +'');        
        },
        "oColVis": {
            "activate": "mouseover",    
            "aiExclude": [0,8]
        }
        }).columnFilter({   
            aoColumns: [ 
                    { type: "select"},
                    { type: "text" },
                    { type: "select" },
                    { type: "select"},
                    { type: "text"},
                    { type: "text"},
                    { type: "select"},
                    { type: "text"}
                ]
        }); 



    // Implements the dataTables plugin on the HTML table
    var $lmTable= $("#line_managers_table").dataTable( {
        "oLanguage": {
            "sSearch": "Filter:"
        },
        "oTableTools": {
            "sSwfPath": "swf/copy_csv_xls_pdf.swf",
            "aButtons": [
                {
                    "sExtends": "print"
                }
            ]       },
        "bProcessing": true,
        "bServerSide": true,
        "sAjaxSource": "scripts/line_managers_serverside.php",
        "iDisplayLength": 10,       
        "bJQueryUI": false,
        "sPaginationType": "scrolling",
        "sDom": '<"clear"><"top"Tfilr<"clear">pt>'
        }); 


    // Implements the dataTables plugin on the HTML table
    var $dTable= $("#divisions_table").dataTable( {
        "oLanguage": {
            "sSearch": "Filter:"
        },
        "oTableTools": {
            "sSwfPath": "swf/copy_csv_xls_pdf.swf",
            "aButtons": [
                {
                    "sExtends": "print"
                }
            ]       },
        "bProcessing": true,
        "bServerSide": true,
        "sAjaxSource": "scripts/divisions_serverside.php",
        "iDisplayLength": 20,       
        "bJQueryUI": false,
        "sPaginationType": "scrolling",
        "sDom": '<"clear"><"top"Tfilr<"clear">pt>'
        }); 

});
</script>

score 9 · Answer 1 · answered Sep 03 '13 at 09:37

9

The problem is that there is an <embed> element with undefined width and height, because table should be visible during initialization.

I solved it via simple CSS rule

.DTTT_button embed {
    width: 50px;
    height: 24px;
}

change sizes according to your situation.

No need any functions and other extra coding.

answered Sep 03 '13 at 09:37

Pavel Kostenko

1,859
1
18
18

Worked for me too, Thanks! – Jason Turan Jan 18 '16 at 21:00

score 1 · Answer 2 · edited Jan 19 '15 at 21:13

1

If you are hiding / showing tables, you must call fnResizeButtons(). Also make sure to have at least datatables version 1.8. this issue is surely related to the flash plugin that is not working correctly

edited Jan 19 '15 at 21:13

Alexander Bird

38,679
42
124
159

answered Aug 07 '12 at 16:29

Nicola Peluchetti

76,206
31
145
192

Thank you, version is ok. This is the same code as: http://stackoverflow.com/questions/11797719/refresh-datatable-on-ajax-success - Would i need to run fnResizeButtons() for each div that shows/hides the table? – Codded Aug 07 '12 at 20:04
Nicola Peluchetti: Cant get this to work, please could you show me an example. – Codded Aug 08 '12 at 11:40

Charles Burns · Answer 3 · 2012-10-12T14:27:32.297

0

Check your sSwfPath and make sure the Flash file actually exists there. Also note you are using a relative path. Try using an absolute path to ensure you get the right location.

--- Edit ---

This does not appear to be an uncommon problem. The following thread mentions a number of solutions to the "multiple tables with TableTools problem."

http://datatables.net/forums/discussion/3963/tabletools-on-multiple-tables/p1

edited Oct 12 '12 at 14:27

answered Oct 05 '12 at 18:15

Charles Burns

10,310
7
64
81

thanks for responding but this is not the issue, the path is fine and works when I am only using one instance. Any other ideas? – Codded Oct 12 '12 at 09:25
I added a possibly useful link. If you haven't already, be sure not to miss the obvious and get the latest version of TableTools, DataTables, etc. – Charles Burns Oct 12 '12 at 14:28

kayz1 · Answer 4 · 2013-04-17T19:48:19.643

Table must be visible during the initialization.

If not, just call fnResizeButtons on display like that (2 options):

    $("#tabs").tabs({
                activate : function(event, ui)
                {
                    // Version 1.
                    $('table', ui.panel).each(function()
                    {
                        var oTableTools = TableTools.fnGetInstance(this);

                        if (oTableTools && oTableTools.fnResizeRequired())
                        {
                            oTableTools.fnResizeButtons();
                        }
                    });

                    // or version 2.
                    var tableInstances = TableTools.fnGetMasters(), instances = tableInstances.length;

                    while (instances--)
                    {
                        var dataTable = tableInstances[instances];
                        if (dataTable.fnResizeRequired())
                        {
                            dataTable.fnResizeButtons();
                        }
                    }
                }
            });

Chanicho · Answer 5 · 2014-06-16T15:29:28.647

I created an account just to say that Kayz1's answer worked perfectly for me. (I didn't have enough rep to comment on his thread)

I had a problem very similar to OP. My problem stemmed from the fact that the tables were not visible during initialization. This was due to jqueryUI Tabs. The fix was to call the code that Kayz1 listed above. I put mine in the Tabs definition, however it could exist elsewhere.

Here is my exact definition of tabs.

            $("#tabs").tabs({
            show: function (event, ui) {
                var table = $.fn.dataTable.fnTables(true);
                if (table.length > 0) {
                    $(table).dataTable().fnAdjustColumnSizing();
                }                
            },
            activate: function (event, ui) {
                var tableInstances = TableTools.fnGetMasters(), instances = tableInstances.length;

                while (instances--) {
                    var dataTable = tableInstances[instances];
                    if (dataTable.fnResizeRequired()) {
                        dataTable.fnResizeButtons();
                    }
                }
            }
        });

Datatables TableTools multiple tables on the same page

5 Answers5

Linked