Keyboard navigation is essential for fast navigation of a table operations and also for good accessibility. Buttons provides the ability to give each button a key binding - i.e. a key combination that when pressed will activate the button's action.
The key binding can be given as a single character if you wish to listen for an unmodified key press, or as an object if you wish it to only be activated when a modifier key such as shift, alt, etc, is pressed.
Only when there is no element on the page that has focus will Buttons act on a key press. This means that if you search for (for example) 1 in the DataTables search box, it will not activate Button 1 in this example. Having said that, adding a modifier key, such as shift or alt can often be useful to prevent accidental triggering of a button.
This example shows two buttons; the first will be activated if 1 is pressed on the keyboard. The second requires alt + 2 to be
pressed.
| Name | Position | Office | Age | Start date | Salary |
|---|---|---|---|---|---|
| Name | Position | Office | Age | Start date | Salary |
| Airi Satou | Accountant | Tokyo | 33 | 2008/11/28 | $162,700 |
| Angelica Ramos | Chief Executive Officer (CEO) | London | 47 | 2009/10/09 | $1,200,000 |
| Ashton Cox | Junior Technical Author | San Francisco | 66 | 2009/01/12 | $86,000 |
| Bradley Greer | Software Engineer | London | 41 | 2012/10/13 | $132,000 |
| Brenden Wagner | Software Engineer | San Francisco | 28 | 2011/06/07 | $206,850 |
| Brielle Williamson | Integration Specialist | New York | 61 | 2012/12/02 | $372,000 |
| Bruno Nash | Software Engineer | London | 38 | 2011/05/03 | $163,500 |
| Caesar Vance | Pre-Sales Support | New York | 21 | 2011/12/12 | $106,450 |
| Cara Stevens | Sales Assistant | New York | 46 | 2011/12/06 | $145,600 |
| Cedric Kelly | Senior Javascript Developer | Edinburgh | 22 | 2012/03/29 | $433,060 |
The Javascript shown below is used to initialise the table shown in this example:
$(document).ready(function() {
$('#example').DataTable( {
dom: 'Bfrtip',
buttons: [
{
text: 'Button <u>1</u>',
key: '1',
action: function ( e, dt, node, config ) {
alert( 'Button 1 activated' );
}
},
{
text: 'Button <u><i>alt</i> 2</u>',
key: {
altKey: true,
key: '2'
},
action: function ( e, dt, node, config ) {
alert( 'Button 2 activated' );
}
}
]
} );
} );
In addition to the above code, the following Javascript library files are loaded for use in this example:
The HTML shown below is the raw HTML table element, before it has been enhanced by DataTables:
This example uses a little bit of additional CSS beyond what is loaded from the library files (below), in order to correctly display the table. The additional CSS used is shown below:
The following CSS library files are loaded for use in this example to provide the styling of the table:
This table loads data by Ajax. The latest data that has been loaded is shown below. This data will update automatically as any additional data is loaded.
The script used to perform the server-side processing for this table is shown below. Please note that this is just an example script using PHP. Server-side processing scripts can be written in any language, using the protocol described in the DataTables documentation.