Preamble

Twitter Bootstrap is a very powerful design framework for allowing you to very quickly create applications with a unified look and feel. DataTables integrates well with Bootstrap, and so does TableTools.

This example shows the default Bootstrap theme being used with a Bootstrap styled DataTable. sDom is supplied to the DataTable with a setup suitable for Bootstrap styling, and a TableTools collection is used to show how it can be used in this environment.

Live example

Initialisation code

$(document).ready( function () {
	$('#example').dataTable( {
		"sDom": "<'row-fluid'<'span6'T><'span6'f>r>t<'row-fluid'<'span6'i><'span6'p>>",
		"oTableTools": {
			"aButtons": [
				"copy",
				"print",
				{
					"sExtends":    "collection",
					"sButtonText": 'Save <span class="caret" />',
					"aButtons":    [ "csv", "xls", "pdf" ]
				}
			]
		}
	} );
} );

The following code is included from the DataTables bootstrap integration file:

// Set the classes that TableTools uses to something suitable for Bootstrap
$.extend( true, $.fn.DataTable.TableTools.classes, {
	"container": "btn-group",
	"buttons": {
		"normal": "btn",
		"disabled": "btn disabled"
	},
	"collection": {
		"container": "DTTT_dropdown dropdown-menu",
		"buttons": {
			"normal": "",
			"disabled": "disabled"
		}
	}
} );

// Have the collection use a bootstrap compatible dropdown
$.extend( true, $.fn.DataTable.TableTools.DEFAULTS.oTags, {
	"collection": {
		"container": "ul",
		"button": "li",
		"liner": "a"
	}
} );

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)