buttons.dom.buttonLiner

Since: Buttons 1.0.0

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

Description

This option controls the HTML tag that is used as the liner for each button. This can be particularly useful for adding complex styling rules to buttons. It can also be disabled if you wish to have minimal markup in your document.

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 <span>...</span> button liner element that is shown in the example HTML there.

Types

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, a, etc.
  • className - a string value which defines the element's class name. Multiple classes can be given using space separation.

null

Description:

When set to null, this option will disable the button liner element and the buttons will be created without a liner.

Examples

DataTables initialisation: Use an i tag to line the button element:

$('#myTable').DataTable( {
	buttons: {
		dom: {
			buttonLiner: {
				tag: 'i'
			}
		}
	}
} );

Instance initialisation: Disable the button liner using null as the tag value:

new $.fn.dataTable.Buttons( table, {
	buttons: {
		dom: {
			buttonLiner: null
		}
	]
} );