buttons.dom.button

Since: Buttons 1.0.0

DOM configuration for individual button elements.
Please note - this property requires the Buttons extension for DataTables.

Description

This option controls the HTML tag that is used to create each individual button. With this option the tag type and class name can be specified using the tag and className properties of this object.

Please refer to the buttons.dom documentation for an overview of the DOM structure that Buttons will create. In this specific case, this option controls the <a class="dt-button">...</a> that is shown in the example HTML there.

Type

object

Description:

Plain object which will can have the following properties set:

tag - a string value which defines the HTML tag to use. There should be no spaces or any other formatting - e.g. it should simply be span, div, a etc.
className - a string value which defines the element's class name. Multiple classes can be given using space separation.
disabled - The class name to assign to the button when the button is in the disabled state.
active - The class name to assign to the button when the button is in the active state.

Examples

DataTables initialisation: Use an input for the button display:

$('#myTable').DataTable( {
	buttons: {
		dom: {
			button: {
				tag: 'input'
			}
		}
	}
} );

Instance initialisation: Use a button tag for the button display with a class name:

new $.fn.dataTable.Buttons( table, {
	buttons: {
		dom: {
			button: {
				tag: 'button',
				className: 'btn'
			}
		}
	]
} );