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] +' '+ 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] +' '+ 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>
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.
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
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
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();
}
}
}
});
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();
}
}
}
});
来源：https://stackoverflow.com/questions/11848593/datatables-tabletools-multiple-tables-on-the-same-page