buttons.dom

Options to control the DOM structure Buttons creates.
Please note - this property requires the Buttons extension for DataTables.

Description

The markup that is created by Buttons is quite flexible in that you can control the tags used and the class names. You can also optionally control the structure of the markup for the buttons.

By default the Buttons instance will create DOM of the following structure:

<div class="dt-buttons">
    <a class="dt-button" tabindex="0" aria-controls="{table-id}">
        <span>Button 1</span>
    </a>
    <a class="dt-button" tabindex="0" aria-controls="{table-id}">
        <span>Button 2</span>
    </a>
    ...
</div>

The collection button type, when activated creates the following markup which is attached to the body tag of the document.

<div class="dt-button-collection">
    <a class="dt-button" tabindex="0" aria-controls="{table-id}">
        <span>Collection button 1</span>
    </a>
    <a class="dt-button" tabindex="0" aria-controls="{table-id}">
        <span>Collection button 2</span>
    </a>
    ...
</div>

In all cases the tabindex attribute is defined by the tabIndex option of DataTables and the aria-controls attribute is automatically added using the id of the host table to help improve accessibility.

The rest of the markup can be controlled using the following options:

• Container (<div class="dt-buttons">...</div> above):
  • buttons.dom.container
• Button (<a class="dt-button">...</a> above - common to both the main buttons and those in the collection display):
  • buttons.dom.button
• Button container (note used above, null by default - common to both the main buttons and those in the collection display):
  • buttons.dom.buttonContainer
• Button liner (<span> in the button - common to both the main buttons and those in the collection display):
  • buttons.dom.buttonLiner
• Collection container (<div class="dt-button-collection">...</div> above):
  • buttons.dom.collection

All options are given as strings, and are generally self explanatory, however, please refer to the documentation for each option for full details.

Type

Examples

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

new $.fn.dataTable.Buttons( table, {
	buttons: {
		dom: {
			button: {
				tag: 'input',
				className: 'table-button'
			},
			buttonLiner: {
				tag: null
			}
		}
	}
} );