TableTools example - plug-ins

Preamble

Plug-ins in TableTools take the form of additional buttons types, which provide extra options and flexibility for TableTools. This example shows how a plug-in button type can be defined and then used in the TableTools initialisation. Note that the TableTools.buttonBase object is extended with our required parameters - this base object provides default values for all of the options TableTools can work with, so they don't all have to be defined in our button.

Additional plug-ins for TableTools can be found on the DataTables.net site. The example plug-in here shows a button which is used to insert the data from the table into a given element.

Live example

Rendering engineBrowserPlatform(s)Engine versionCSS grade
Rendering engineBrowserPlatform(s)Engine versionCSS grade
Gecko Firefox 1.5 Win 98+ / OSX.2+ 1.8 A
Gecko Firefox 2.0 Win 98+ / OSX.2+ 1.8 A
Gecko Firefox 3.0 Win 2k+ / OSX.3+ 1.9 A
Gecko Camino 1.0 OSX.2+ 1.8 A
Gecko Camino 1.5 OSX.3+ 1.8 A
Gecko Netscape 7.2 Win 95+ / Mac OS 8.6-9.2 1.7 A
Gecko Netscape Browser 8 Win 98SE+ 1.7 A
Gecko Netscape Navigator 9 Win 98+ / OSX.2+ 1.8 A
Gecko Mozilla 1.0 Win 95+ / OSX.1+ 1 A
Gecko Mozilla 1.1 Win 95+ / OSX.1+ 1.1 A
Showing 1 to 10 of 57 entries

Initialisation code

TableTools.BUTTONS.copy_to_div = $.extend( true, TableTools.buttonBase, {
	"sNewLine": "<br>",
	"sButtonText": "Copy to element",
	"sDiv": "",
	"fnClick": function( nButton, oConfig ) {
		document.getElementById(oConfig.sDiv).innerHTML = 
			this.fnGetTableData(oConfig);
	}
} );

$(document).ready( function () {
	$('#example').dataTable( {
		"sDom": 'T<"clear">lfrtip',
		"oTableTools": {
			"aButtons": [
				{
					"sExtends":    "copy_to_div",
					"sButtonText": "Copy to div",
					"sDiv":        "copy",
				}
			]
		}
	} );
} );

Other examples