DataTables

• Usage
• Examples
• Styling
• API
• Development
• Editor
• Extras
• Plug-ins
• Blog
• FAQs
• Forums

Purchase

Download

Support

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

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

• Basic initialisation
• Setting the SWF path
• Custom button arrangement
• Button text alteration
• Using button collections
• Using jQuery UI themes
• Styling with Twitter Bootstrap
• Multiple TableTools toolbars for a single table
• Multiple DataTables with a single initialisation
• User selectable rows (multiple rows)
• User selectable rows (single row)
• Alternative initialisation using 'new TableTools()'
• Altering the TableTools defaults
• TableTools plug-in buttons
• Customising the PDF output (adding text and orientation)