DataTables logo DataTables

This site contains the legacy documentation for DataTables v1.9 and earlier for reference only.
DataTables 1.9 was End Of Life in 2014. Do not use it for new work.
The current release of DataTables can always be found on DataTables.net.

Plug-ins

Plug-ins for TableTools take the form of new button definitions. These button types can be included in your Javascript and then used by TableTools using the normal initialisation methods for selecting which buttons to use (aButtons).

If you have created any button types yourself and would like to share them, please get in touch and send me your plug-in so I can put it up on this page!

Plug-in buttons

copy_to_div
Show details 		This button will copy the table contents (in formatted text, rather than HTML) to an element with a given ID (using the 'sDiv' parameter).
Author: Allan Jardine
Code: 
TableTools.BUTTONS.copy_to_div = {
	"sAction": "text",
	"sTag": "default",
	"sFieldBoundary": "",
	"sFieldSeperator": "\t",
	"sNewLine": "
",
	"sToolTip": "",
	"sButtonClass": "DTTT_button_text",
	"sButtonClassHover": "DTTT_button_text_hover",
	"sButtonText": "Copy to element",
	"mColumns": "all",
	"bHeader": true,
	"bFooter": true,
	"sDiv": "",
	"fnMouseover": null,
	"fnMouseout": null,
	"fnClick": function( nButton, oConfig ) {
		document.getElementById(oConfig.sDiv).innerHTML = 
			this.fnGetTableData(oConfig);
	},
	"fnSelect": null,
	"fnComplete": null,
	"fnInit": null
};


/* Example usage */
$(document).ready( function () {
	$('#example').dataTable( {
		"sDom": 'T<"clear">lfrtip',
		"oTableTools": {
			"aButtons": [
				{
					"sExtends":    "copy_to_div",
					"sButtonText": "Copy to div",
					"sDiv":        "copy",
				}
			]
		}
	} );
} );
download (GET only)
Show details 		When working with TableTools you might wish to have the server create and download a file for you (for example if you are using server-side processing with a large dataset). This button achieves exactly this by loading an external source (given by the sUrl parameter) in an iFrame. You can then have the server set a suitable MIME type and header ("Content-Disposition: attachment;") to force the download. The server is sent the full list of DataTables server-side GET parameters which can be used to match your output in the file to server-side processing if you wish. Note that this plug-in requires DataTables 1.8.2 or newer.
Author: Allan Jardine
Code: 
TableTools.BUTTONS.download = {
	"sAction": "text",
	"sTag": "default",
	"sFieldBoundary": "",
	"sFieldSeperator": "\t",
	"sNewLine": "<br>",
	"sToolTip": "",
	"sButtonClass": "DTTT_button_text",
	"sButtonClassHover": "DTTT_button_text_hover",
	"sButtonText": "Download",
	"mColumns": "all",
	"bHeader": true,
	"bFooter": true,
	"sDiv": "",
	"fnMouseover": null,
	"fnMouseout": null,
	"fnClick": function( nButton, oConfig ) {
	  var oParams = this.s.dt.oApi._fnAjaxParameters( this.s.dt );
    var iframe = document.createElement('iframe');
    iframe.style.height = "0px";
    iframe.style.width = "0px";
    iframe.src = oConfig.sUrl+"?"+$.param(oParams);
    document.body.appendChild( iframe );
	},
	"fnSelect": null,
	"fnComplete": null,
	"fnInit": null
};


/* Example usage */
$(document).ready( function () {
	$('#example').dataTable( {
		"sDom": 'T<"clear">lfrtip',
		"oTableTools": {
		  "aButtons": [ {
		    "sExtends": "download",
		    "sButtonText": "Download CSV",
		    "sUrl": "/generate_csv.php"
		  } ]
	  }
	} );
} );
download (POST + GET)
Show details 		This button is an extension of the 'download' button above, but allows you to POST parameters to the server as well as using GET parameters (the aoPost and aoGet arrays in the code are where you would put your parameters, or call a function to create the parameters you want to use). The way the plug-in works is by creating an HTML form in the iframe and then submitting that to the target address.
Author: Allan Jardine
Code: 
TableTools.BUTTONS.download = {
	"sAction": "text",
	"sTag": "default",
	"sFieldBoundary": "",
	"sFieldSeperator": "\t",
	"sNewLine": "<br>",
	"sToolTip": "",
	"sButtonClass": "DTTT_button_text",
	"sButtonClassHover": "DTTT_button_text_hover",
	"sButtonText": "Download",
	"mColumns": "all",
	"bHeader": true,
	"bFooter": true,
	"sDiv": "",
	"fnMouseover": null,
	"fnMouseout": null,
	"fnClick": function( nButton, oConfig ) {
		var oParams = this.s.dt.oApi._fnAjaxParameters( this.s.dt );
		var aoPost = [
			{ "name": "hello", "value": "world" }
		];
		var aoGet = [];

		/* Create an IFrame to do the request */
		nIFrame = document.createElement('iframe');
		nIFrame.setAttribute( 'id', 'RemotingIFrame' );
		nIFrame.style.border='0px';
		nIFrame.style.width='0px';
		nIFrame.style.height='0px';
			
		document.body.appendChild( nIFrame );
		var nContentWindow = nIFrame.contentWindow;
		nContentWindow.document.open();
		nContentWindow.document.close();
		
		var nForm = nContentWindow.document.createElement( 'form' );
		nForm.setAttribute( 'method', 'post' );
		
		/* Add POST data */
		for ( var i=0 ; i<aoPost.length ; i++ )
		{
			nInput = nContentWindow.document.createElement( 'input' );
			nInput.setAttribute( 'name', aoPost[i].name );
			nInput.setAttribute( 'type', 'text' );
			nInput.value = aoPost[i].value;
			
			nForm.appendChild( nInput );
		}
		
		/* Add GET data to the URL */
		var sUrlAddition = '';
		for ( var i=0 ; i<aoGet.length ; i++ )
		{
			sUrlAddition += aoGet[i].name+'='+aoGet[i].value+'&';
		}
		
		nForm.setAttribute( 'action', oConfig.sUrl );
		
		/* Add the form and the iframe */
		nContentWindow.document.body.appendChild( nForm );
		
		/* Send the request */
		nForm.submit();
	},
	"fnSelect": null,
	"fnComplete": null,
	"fnInit": null
};

$(document).ready( function () {
	$('#example').dataTable( {
		"sDom": 'T<"clear">lfrtip',
		"oTableTools": {
			"aButtons": [ {
				"sExtends": "download",
				"sButtonText": "Download XLS",
				"sUrl": "/generate_xls.php"
			} ]
		}
	} );
} );