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.

Buttons

When using TableTools, you will likely want to customise the button toolbar. TableTools has a number of built-in buttons which can be placed into your toolbar very easily. The list below gives details about each of the predefined buttons that are available in TableTools. If you want to customise them or create your own buttons, have a look at the Button options page.

To make use of the buttons below, you simply need to modify the aButtons initialisation option for TableTools, as shown in the example below. This example will generate three visible buttons, one of them (the 'Save' button) will create a drop down list when activated with the save buttons in it.

$(document).ready( function () {
	$('#example').dataTable( {
		"sDom": 'T<"clear">lfrtip',
		"oTableTools": {
			"aButtons": [
				"copy",
				"print",
				{
					"sExtends":    "collection",
					"sButtonText": "Save",
					"aButtons":    [ "csv", "xls", "pdf" ]
				}
			]
		}
	} );
} );

Predefined buttons

ajax
Show details 		Make an Ajax call to the server with the information in the table, so some kind of processing can be done to it. But button can be used with server-side processing in DataTables to allow full support for TableTools in that operating mode. You will likely need to set the sAjaxUrl button option to have it point at the right address.
Default:
Type: Predefined button
Code example: 
$(document).ready( function () {
	$('#example').dataTable( {
		"sDom": 'T<"clear">lfrtip',
		"oTableTools": {
			"aButtons": [
				"ajax"
			]
		}
	} );
} );
collection
Show details 		A collection in TableTools is a group of buttons which are initially hidden, until the main button (as defined by the collection) is activated. At this point the buttons in the collection (defined by the 'aButtons' array) will be shown in a drop down list. This allows options to be grouped together.
Default:
Type: Predefined button
Code example: 
$(document).ready( function () {
	$('#example').dataTable( {
		"sDom": 'T<"clear">lfrtip',
		"oTableTools": {
			"aButtons": [
				{
					"sExtends":    "collection",
					"sButtonText": "Save",
					"aButtons":    [ "csv", "xls", "pdf" ]
				}
			]
		}
	} );
} );
copy
Show details 		Copy the table data to the operating system's clipboard.
Default:
Type: Predefined button
Code example: 
$(document).ready( function () {
	$('#example').dataTable( {
		"sDom": 'T<"clear">lfrtip',
		"oTableTools": {
			"aButtons": [
				"copy"
			]
		}
	} );
} );
csv
Show details 		Save the table data to a CSV file.
Default:
Type: Predefined button
Code example: 
$(document).ready( function () {
	$('#example').dataTable( {
		"sDom": 'T<"clear">lfrtip',
		"oTableTools": {
			"aButtons": [
				"csv"
			]
		}
	} );
} );
div
Show details 		Create a TableTools button using a DIV rather than a BUTTON tag. This is intended for use as a label or presentation spacer, although it does have the standard range of options (the same as a text button, so fnClick etc) which can be used if required.
Default:
Type: Predefined button
Code example: 
$(document).ready( function () {
	$('#example').dataTable( {
		"sDom": 'T<"clear">lfrtip',
		"oTableTools": {
			"aButtons": [
				{
					"sExtends": "div",
					"sButtonText": "Hello!"
				}
			]
		}
	} );
} );
pdf
Show details 		Save the table data to a PDF file. Note that in order to change the styling of the table you will need to modify the TableTools AS3 source file.
Default:
Type: Predefined button
Code example: 
$(document).ready( function () {
	$('#example').dataTable( {
		"sDom": 'T<"clear">lfrtip',
		"oTableTools": {
			"aButtons": [
				"pdf"
			]
		}
	} );
} );
print
Show details 		Switch into a print view. This will hide all elements in the document other than the table, allowing the end user to print it cleanly and without wasting ink. Note that when in print view, TableTools will add the class 'DTTT_Print' to the document body, allowing any custom styling you may wish for that view.
Default:
Type: Predefined button
Code example: 
$(document).ready( function () {
	$('#example').dataTable( {
		"sDom": 'T<"clear">lfrtip',
		"oTableTools": {
			"aButtons": [
				"print"
			]
		}
	} );
} );
select
Show details 		Basically the same as a text button, but will add and remove the class 'DTTT_disabled' when rows in the table are selected or not (as needed) - i.e. this button will be 'active' when a row is selected in the table.
Default:
Type: Predefined button
Code example: 
$(document).ready( function () {
	$('#example').dataTable( {
		"sDom": 'T<"clear">lfrtip',
		"oTableTools": {
			"aButtons": [
				"select"
			]
		}
	} );
} );
select_all
Show details 		Select all rows in the table when activated.
Default:
Type: Predefined button
Code example: 
$(document).ready( function () {
	$('#example').dataTable( {
		"sDom": 'T<"clear">lfrtip',
		"oTableTools": {
			"aButtons": [
				"select_all"
			]
		}
	} );
} );
select_none
Show details 		Deselect all rows in the table when activated.
Default:
Type: Predefined button
Code example: 
$(document).ready( function () {
	$('#example').dataTable( {
		"sDom": 'T<"clear">lfrtip',
		"oTableTools": {
			"aButtons": [
				"select_none"
			]
		}
	} );
} );
select_single
Show details 		The same as the 'select' option, but this button will only be enabled when a single row in the table is selected. If multiple rows are selected by the user, the button will go back into the disabled state.
Default:
Type: Predefined button
Code example: 
$(document).ready( function () {
	$('#example').dataTable( {
		"sDom": 'T<"clear">lfrtip',
		"oTableTools": {
			"aButtons": [
				"select_single"
			]
		}
	} );
} );
text
Show details 		A simple text button. This button doesn't do anything by default, and has the text "Text button" in it - which you will almost certainly which to customise using the button options. Event handlers can be attached using the button options to trigger an action as well.
Default:
Type: Predefined button
Code example: 
$(document).ready( function () {
	$('#example').dataTable( {
		"sDom": 'T<"clear">lfrtip',
		"oTableTools": {
			"aButtons": [
				"text"
			]
		}
	} );
} );
xls
Show details 		Save the table data to a file which can be opened by Microsoft Excel. Note that this actually saves a 'csv' file rather than a true xls file. Excel will open it without any problems.
Default:
Type: Predefined button
Code example: 
$(document).ready( function () {
	$('#example').dataTable( {
		"sDom": 'T<"clear">lfrtip',
		"oTableTools": {
			"aButtons": [
				"xls"
			]
		}
	} );
} );