Datatables TableTools multiple tables on one page

Question

I'm having issues with multiple instances of DataTables and TableTools on the same page. DataTables work fine, but when using TableTools, only the first table works fully with buttons.

All buttons are displayed perfectly on all tables, but when you click a button, it does nothing. (except for the "Print" button it works on all 4 tables).

Does anyone have any idea why this is happening? I was looking for a solution, but could not find.

<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> 

Answer 1

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

I solved this with a simple CSS rule

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

resize to suit your situation.

There is no need for any functions or other additional coding.

Answer 2

If you hide / show tables, you should call fnResizeButtons () . Also make sure you have at least datatables version 1.8. this problem is definitely related to the flash plugin that is not working correctly

Answer 3

Check your sSwfPath and make sure the Flash file really exists. Also note that you are using a relative path. Try using the absolute path to ensure the correct location.

--- Edit ---

This does not seem like an unusual problem. The following thread mentions a number of solutions for "multiple tables with TableTools problem".

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

Answer 4

The table should be visible during initialization.

If not, just call fnResizeButtons on the screen (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(); } } } }); 

Answer 5

I created an account to say that Kayz1 answer works great for me. (I didn’t have enough comments to comment on his thread)

I had a problem very similar to OP. My problem is that the tables were not visible during initialization. This happened due to jqueryUI tabs. The fix was to call the code specified by Kayz1. 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(); } } } });