3

I've been using dataTables in my project for about a while now and would like to enhance the user experience by adding some of the nice functionality that TableTools has to offer. I've started to play around with it and I'm struggling to get the basic example to work so there is definitely something wrong with my config so I'm hoping someone here can point out the obvious because in my head it should work just fine but it doesn't.

I currently have the jQuery & dataTables(1.9.4) libraries stored in the same directory in my project. They currently function fine like that.

  • src="scripts/jquery/jquery-1.8.2.min.js"
  • src="scripts/jquery/jquery.dataTables.min.js"

I downloaded the tableTools js and stored it in the same scripts/jquery directory and also saved the css file to my css directory.

  • src="scripts/jquery/dataTables.tableTools.js"
  • href="style/dataTables.tableTools.css"/>

I've been attempting to re-create the example provided here. I've added the sample HTML table and the JavaScript code to my jsp file.

$(document).ready(function() { 

$('#example').DataTable(
     { "dom": 'T<"clear">lfrtip', 

                "tableTools": { 
                     "aButtons": [ "copy", "print", 
                    { "sExtends": "collection", 
                      "sButtonText": "Save", 
                      "aButtons": [ "csv", "xls", "pdf" ] 
                 } ] 
      } } 
  ); } );

The end result is the table displays nicely formatted with the dataTables filter functionality but Copy, Print, Save option appear on screen.

Can someone advise on why this isn't working? My JS libraries are located in the directories specified, so I'm a little confused. Thanks in advance.

davidkonrad
  • 83,997
  • 17
  • 205
  • 265
180cl
  • 161
  • 1
  • 2
  • 7

0 Answers0