Initialisation

This extension has now been retired and has been replaced by the Buttons and Select extensions. The documentation is retained for legacy reference only. New projects should use Buttons and Select in preference to TableTools.

Initialisation of TableTools is typically done at the same time as the initialisation of DataTables through the dom and tableTools properties. Customisation of TableTools is done through the properties of the tableTools object - a full list of the options available is provided before. It is also possible to initialise TableTools directly, which can be useful when you want an easy reference to the instance, or to place the toolbar outside the DataTables DOM structure.

DataTables properties

tableTools Show details	To customise the TableTools options through the DataTables initialisation object, you can make use of this parameter. Any of the options given in the "Initialisation parameters" section below can be used here.
Default:	{}
Type:	Object
Code example:	$(document).ready( function () { $('#example').dataTable( { "dom": 'T<"clear">lfrtip', "tableTools": { "sSwfPath": "/swf/copy_csv_xls_pdf.swf" } } ); } );

dom Show details	The dom parameter in DataTables is used to position the various controls that DataTables adds to the table (filtering, paging etc) in the DOM. This will directly effect the position of the elements in the display, when combined with your CSS. TableTools can be included by inserting the character 'T' into dom. This is all that is needed to initialise TableTools - everything is options and customisation.
Default:	lfrtip
Type:	String
Code example:	$(document).ready( function () { $('#example').dataTable( { "dom": 'T<"clear">lfrtip' } ); } );

Options

aButtons Show details	This parameter defined the buttons that TableTools will use and provides the primary focus for customisation of TableTools. In its basic form the elements of this array are strings which match the predefined buttons, but the elements can also be objects which define your own buttons, or override the default actions. This is fully explained on the Buttons page.
Default:	[ "copy", "csv", "xls", "pdf", "print" ]
Type:	Array
Code example:	$(document).ready( function () { $('#example').dataTable( { "dom": 'T<"clear">lfrtip', "tableTools": { "aButtons": [ "copy", "print" ] } } ); } );

fnPreRowSelect Show details	This is a callback function which is fired just prior to a row being selected (i.e. the mouse down has occurred, but TableTools has not yet selected the row). It can be used to cancel the selection if needed.
Default:
Input parameters:	event : click event which occurred to select this row array - node : TR elements to be selected
Return parameter:	Boolean - true if the row can be selected, false if it cannot.
Code example:	$(document).ready( function () { $('#example').dataTable( { "dom": 'T<"clear">lfrtip', "tableTools": { "fnPreRowSelect": function ( e, nodes ) { if ( e.currentTarget.className.indexOf('no_select') != -1 ) { return false; } return true; } } } ); } );

fnRowDeselected Show details	Callback function which is called when a row is deselected (i.e. the opposite of fnRowSelected).
Default:
Input parameters:	array - node : TR elements that were deselected
Return parameter:	void
Code example:	$(document).ready( function () { $('#example').dataTable( { "dom": 'T<"clear">lfrtip', "tableTools": { "fnRowDeselected": function ( nodes ) { alert( 'The row with ID '+nodes[0].id+' was deselected' ); } } } ); } );

fnRowSelected Show details	Callback function which occurs when a row is selected. This allows a particular action to occur when any row is selected (a selected row counter for example).
Default:
Input parameters:	array - node : TR elements that were selected
Return parameter:	void
Code example:	$(document).ready( function () { $('#example').dataTable( { "dom": 'T<"clear">lfrtip', "tableTools": { "fnRowSelected": function ( nodes ) { alert( 'The row with ID '+nodes[0].id+' was selected' ); } } } ); } );

sRowSelect Show details	TableTools provides everything that is needed to allow the end user to select rows in a table (by clicking on them). This is disabled by default, but can be readily enabled by setting this property to either "single" (to allow only one row in the table to be selected at a time), or "multi" (to allow any number of rows to be selected).
Default:	none
Type:	String
Code example:	$(document).ready( function () { $('#example').dataTable( { "dom": 'T<"clear">lfrtip', "tableTools": { "sRowSelect": "single" } } ); } );

sRowSelector Show details	By default when row selection is active, TableTools will select a row when any element in the table is clicked. It can be useful to limit this selection to certain columns, or even certain elements in the row, which can be done through this option. It is a simple jQuery selector string that is used to select the elements that will perform the select..
Default:	tr
Type:	String
Code example:	$(document).ready( function () { // Select the row on click or all but the first column $('#example').dataTable( { "dom": 'T<"clear">lfrtip', "tableTools": { "sRowSelector": "td:not(:first-child)" } } ); } );

sSelectedClass Show details	Set the class used to indicate that a row has been selected by the end user.
Default:	DTTT_selected
Type:	String
Code example:	$(document).ready( function () { $('#example').dataTable( { "dom": 'T<"clear">lfrtip', "tableTools": { "sRowSelect": "multi", "sSelectedClass": "row_selected" } } ); } );

sSwfPath Show details	Define the path of the SWF to be used by TableTools for copy to clipboard and saving a file locally operations. If you are having problems with these operations, but not printing, this is very likely to be the issue.
Default:	media/swf/copy_csv_xls_pdf.swf
Type:	String
Code example:	$(document).ready( function () { $('#example').dataTable( { "dom": 'T<"clear">lfrtip', "tableTools": { "sSwfPath": "/swf/copy_csv_xls_pdf.swf" } } ); } );

Direct initialisation

TableTools can be initialised directly through the $.fn.dataTable.TableTools class, as well as through the DataTables dom option. The TableTools constructor must be called with the keyword new to create a new instance, and takes two parameters:

1 .DataTables object - the DataTables instance to attach TableTools to (i.e. where it will get the data source. 2. TableTools initialisation options - an object with the options from the list above.

The example below shows how TableTools can be initialised in this manner. Note that you will need to insert the container element that TableTools created into the DOM manually, by using the fnContainer() API method and injecting the returned node where you want it to appear in the document. The example below shows this being inserted before the #demo element.

$(document).ready( function () {
    var table = $('#example').dataTable();
    var tableTools = new $.fn.dataTable.TableTools( table, {
        "buttons": [
            "copy",
            "csv",
            "xls",
            "pdf",
            { "type": "print", "buttonText": "Print me!" }
        ]
    } );
     
    $( tableTools.fnContainer() ).insertAfter('div.info');
} );