As part of the DataTables constructor the buttons feature can be used with the layout option to place the Buttons (or multiple instances of Buttons) around the table. The example below shows the configuration of a specific set of buttons.

Other extensions for DataTables also provide buttons - Editor for example makes the create, edit and remove buttons available.

This example shows a single button ... run when the button is activated. ... $('#example').DataTable({ layout: { topStart: { buttons: [ { text: 'My button', action: function (e, dt, node, config) { alert('Button activated'); } } ] } } });...

new DataTable('#example', { layout: { topStart: { buttons: ['copyHtml5', 'excelHtml5', 'csvHtml5', 'pdfHtml5'] } } });

In this example, we make use of Buttons's ability to easily create customised button actions to show a button that will use the Editor form (without displaying it to the end user) to add 250 to the salary value for the selected row.

$('#example').DataTable({ layout: { topStart: { buttons: ['copy', 'csv', 'excel', 'pdf', 'print'] } } });

Buttons is a framework providing common options, styling and API methods for buttons that can control a DataTable. The selection control buttons made available by Select are: selected - Enabled only when one or more items are selected · selectedSingle - Enabled only when a single item is selected ... All of these button types are demonstrated in this example.

new DataTable('#example', { layout: { topStart: { buttons: [ { extend: 'collection', className: 'custom-html-collection', buttons: [ '<h3>Export</h3>', 'pdf', 'csv', 'excel', '<h3 class="not-top-heading">Column Visibility</h3>', 'columnsToggle' ] } ] } } });

Comprehensive editing library for DataTables. ... Buttons own table manipulation modules can be exceptionally useful, but the true flexibility of Buttons can only be unlocked by providing custom buttons which address problems which are unique to the domain you are working in. For example, consider a table of pupils in class registration.

Note also that the buttons.buttons.titleAttr option is used to specify a tooltip title for the button, which can improve accessibility, letting users know what the button does when they hover their mouse over the button. Font Awesome is used to provide the icons uses here, but any image / font can be used as suits your requirements. ... $('#example').DataTable({ layout: { topStart: { buttons: [ { extend: 'copyHtml5', text: '<i class="fa fa-files-o"></i>', titleAttr: 'Copy' }, { extend: 'excelHtml5', text: '<i class="fa fa-file-excel-o"></i>', titleAttr: 'Excel' }, { extend: 'csvHtml5', text: '<i class="fa fa-file-text-o"></i>', titleAttr: 'CSV' }, { extend: 'pdfHtml5', text: '<i class="fa fa-file-pdf-o"></i>', titleAttr: 'PDF' } ] } } });

new DataTable('#example', { layout: { topStart: { buttons: [ { extend: 'fixedColumns', text: 'FixedColumns', config: { start: 1, end: 0 } } ] } }, paging: false, scrollCollapse: true, scrollX: true, scrollY: 300 });

One of the more interesting built-in ... to trigger the button's action. For example you could set it up so that a key press of e (with or without any modifier keys) would trigger editing of the selected rows....

Buttons is initialised using the buttons option in the DataTables constructor, giving an array of the buttons that should be shown. Further options can be specified using this option as an object - see the documentation for details. For example:

Buttons is an extension for DataTables that provides a framework for control buttons, and also a number of default button sets. This example shows the use of Responsive with the colvis button type, demonstrating how Responsive works with column visibility in DataTables.

DataTable.ext.buttons.alert = { ... alert(this.text()); } }; $('#example').DataTable({ layout: { topStart: { buttons: [ { extend: 'alert', text: 'My button 1' }, { extend: 'alert', text: 'My button 2' }, { extend: 'alert', text: 'My button 3' } ] } } });...

new DataTable('#example', { layout: { top1: 'searchBuilder', topStart: { buttons: ['copy', 'csv', 'excel', 'pdf', 'print'] } } });

new DataTable('#example', { layout: { topStart: { buttons: ['copy', 'excel', 'pdf', 'colvis'] } } });

Comprehensive editing library for DataTables. ... This simple example shows Buttons configured with the print button type only. The print button will open a new window in the end user's browser and, by default, automatically trigger the print function allowing the end user to print the table.

Comprehensive editing library for DataTables. ... As well as the selection control buttons, Select also provides a button that can be used to toggle a filter that will reduce the display to just those rows in the table which are selected: showSelected. This example demonstrates this button.

This property is an alias of the feature property buttons.buttons and can be used to configure the feature from the top level DataTables configuration object, rather than in the layout option (see example below). This lets you use the feature as a string rather than an object, but it does restrict ...