jQuery TableTools buttons not loading

Question

I am trying to add tableTools to an existing table that already uses the DataTable plug in. The tableTools buttons do not load. This is my code:

var dataTableOptions = {
  "sScrollY":   "475px",
  "bAutoWidth": true,
  "bSort":      true,
  "bPaginate":  true,
  "sPaginationType": "full_numbers",
  "bFilter":    true,
  "bInfo":      true,
  "bJQueryUI":  true,
  "sDom": '<"clear">lfrtip',
  "oTableTools": {"sSwfPath": appPath + "/swf/copy_csv_xls_pdf.swf"}
};

$j("#movementsResults table").dataTable(dataTableOptions);

The dataTable part works fully, but tableTools don't seem to be working. I have ensured all file paths are correct, including the .swf path and I just can't find the problem.

Answer 1

After running developer tools I got an error:

SCRIPT5009: 'ZeroClipboard_TableTools' is undefined TableTools.js, line 1293 character 3

After googling to find out exactly what ZeroClipboard was, I found out I needed to include that JS file separately, as it was trying to call a function that was created in there. After doing so the buttons started to work, just a matter of styling them now.

Thanks for the help guys

Answer 2

try:

"sDom": 'Tlfrtip'

also, have you verified the appPath variable to be correct? Maybe add this to your code and check the console to verify you dont have like an extra slash or something:

console.log(appPath + "/swf/copy_csv_xls_pdf.swf");

Answer 3

It's required to initialise it in the sDom with T: "sDom": '<"clear">lfrtipT',

Answer 4

You must use the ZeroClipboard.js from the DataTables/DataTools project, not the one from the ZeroClipboard project. They are very different.