buttons.dom.buttonContainer

Since: Buttons 1.0.0

DOM configuration of a button container element.
Please note - this property requires the Buttons extension for DataTables.

Description

This option provides the ability for each button to be wrapped in another element. This can be useful for cases where the styling framework requires a list of buttons, where the list element is just a container and not the button itself (Zurb Foundation requires this for example).

By default this option is null which means that the button is not wrapped in a container element.

Please refer to the buttons.dom documentation for an overview of the DOM structure that Buttons will create.

Type

object

Description:

Plain object which will can have the properties tag and / or className 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, li etc.
className - a string value which defines the element's class name. Multiple classes can be given using space separation.

Examples

DataTables initialisation: Use a ul/li/a list of buttons:

$('#myTable').DataTable( {
	buttons: {
		dom: {
			container: {
				tag: 'ul'
			},
			buttonContainer: {
				tag: 'li'
			},
			button: {
				tag: 'a'
			}
		}
	}
} );

Instance initialisation: Use a ul/li/a list of buttons:

new $.fn.dataTable.Buttons( table, {
	dom: {
		container: {
			tag: 'ul'
		},
		buttonContainer: {
			tag: 'li',
			className: 'button-item'
		},
		button: {
			tag: 'a'
		}
	}
} );