Buttons example Enable / disable

It can often be useful to be able to dynamically enable and disable buttons based on the document state and other components in the table. A typical example of this is to enable a button that will take action on a selected row in the table, only when there is a row selected! If there is no row selected, the button should not take any action when clicked upon (i.e. it is disabled).

This example makes use of the Select extension for DataTables to provide row selection. The select event it listened for to know when the row selection has changed and then update the button's enabled / disabled state through the button().enable() method.

The button() method is a selector method that will use the information given to it to select the buttons that the subsequent methods will take action on. There is also a buttons() method that can be used to select multiple buttons (the DataTables API makes significant use of this plural / singular distinction).

The button-selector used in this example is a simple index selector - button 1 and button 2. Based on the number of rows selected the enablement state is adjusted. The first button is enabled when there is only one row selected, the second when one or more rows are selected.

Note that the Select library provides a number of button types such as selected and selectedSingle that provide this enable / disabled option without the additional code shown in this example.

Row selected dataCount rows selected
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

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
$(document).ready(function() {
    var table = $('#example').DataTable( {
        dom: 'Bfrtip',
        select: true,
        buttons: [
            {
                text: 'Row selected data',
                action: function ( e, dt, node, config ) {
                    alert(
                        'Row data: '+
                        JSON.stringify( dt.row( { selected: true } ).data() )
                    );
                },
                enabled: false
            },
            {
                text: 'Count rows selected',
                action: function ( e, dt, node, config ) {
                    alert( 'Rows: '+ dt.rows( { selected: true } ).count() );
                },
                enabled: false
            }
        ]
    } );
 
    table.on( 'select', function () {
        var selectedRows = table.rows( { selected: true } ).count();
 
        table.button( 0 ).enable( selectedRows === 1 );
        table.button( 1 ).enable( selectedRows > 0 );
    } );
} );

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.