Buttons example Multiple button groups

Buttons' ability to have new instances constructed arbitrarily gives it the ability to have multiple button instances created for a single DataTable. This can be useful if you wish to display button groups with different functionality (file export, editing, etc).

In this example the buttons option is used to construct the first buttons set. The new $.fn.dataTable.Buttons() constructor is then used to create a second and finally the API used to insert this into the document.

Button 1
NamePositionOfficeAgeStart dateSalary
NamePositionOfficeAgeStart dateSalary
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
Showing 1 to 10 of 57 entries
Button 2Button 3

The Javascript shown below is used to initialise the table shown in this example:

Javascript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
$(document).ready(function() {
    var table = $('#example').DataTable( {
        dom: 'Bfrtip',
        buttons: [
            {
                text: 'Button 1',
                action: function ( e, dt, node, config ) {
                    alert( 'Button 1 clicked on' );
                }
            }
        ]
    } );
 
    new $.fn.dataTable.Buttons( table, {
        buttons: [
            {
                text: 'Button 2',
                action: function ( e, dt, node, conf ) {
                    alert( 'Button 2 clicked on' );
                }
            },
            {
                text: 'Button 3',
                action: function ( e, dt, node, conf ) {
                    alert( 'Button 3 clicked on' );
                }
            }
        ]
    } );
 
    table.buttons( 1, null ).container().appendTo(
        table.table().container()
    );
} );

In addition to the above code, the following Javascript library files are loaded for use in this example:

Other examples

Basic initialisation

HTML 5 data export

Flash data export

Column visibility

Print

API

Styling

Please refer to the DataTables documentation for full information about its API properties and methods.
Additionally, there are a wide range of extensions and plug-ins which extend the capabilities of DataTables.

DataTables designed and created by SpryMedia Ltd © 2007-2016
DataTables is licensed under the MIT license.