datatables buttons enable/disable example not working

Question

I'm using datatables with custom buttons. I'm looking in the examples, also googled a bit but I didn't find a working solution.

The problem is that, when I deselect the row the button is still enabled. What is the proper way to enable/disable the buttons when a row is selected/deselected?

var table = $('#example').DataTable( {
    serverSide: true,
    dom: 'Bfrtip',
    ajax: '/get?op=2',
    columns: [
        { data: 'id' },
        // more columns
    ],
    buttons: [
        {
            text: 'New',
            action: function ( e, dt, node, config ) {
                window.location.href = '/property?option=new'
            }
        },
        {
            text: 'Modify',
            action: function ( e, dt, node, config ) {
                window.location.href = '/property?option=modify&id=' + data.id
            },
            enabled: false
        },
        {
            text: 'Delete',
            action: function ( e, dt, node, config ) {
            },
            enabled: false
        }
    ],
    select: true
} );

table.on( 'select', function () {
    var selectedRows = table.rows( { selected: true } ).count();

    table.button( 1 ).enable( selectedRows === 1 );
    table.button( 2 ).enable( selectedRows === 1 );
    table.button( 3 ).enable( selectedRows === 1 );
    //table.button( 1 ).enable( selectedRows > 0 );
} );

Also how can I get the id value for the selected row?

action: function ( e, dt, node, config ) {
    window.location.href = '/property?option=modify&id=' + data.id
},

score 1 · Accepted Answer · answered Jan 03 '16 at 06:14

1

You need to add an event handler for the deselect. see https://datatables.net/reference/event/deselect

It should be something like below...

table.on( 'deselect', function () {
    table.button( 1 ).disable();
    table.button( 2 ).disable();
    table.button( 3 ).disable();
} );

As for getting a row id an example can be found here

answered Jan 03 '16 at 06:14

kurt

1,146
1
8
18

Yay thanks! I didn't look that far. Still, that example is wrong, why says enable/disable if it only enables? :P – Chazy Chaz Jan 03 '16 at 06:22
The enable/disable bit is json for setup, once the element is created it is targeted from the dom. When datatables initializes there will be a function that takes each button and the setting in json and creates an element in the dom – kurt Jan 03 '16 at 06:24
Ah right, like the buttons from the editor. Hmmm I can't get the row id inside the function, what I'm doing wrong? I tried `row().id()` and `rowId()`. – Chazy Chaz Jan 03 '16 at 06:29
@ChazyChaz theres an example here https://datatables.net/reference/api/row().id() – kurt Jan 03 '16 at 06:38
Yes, I'm reading it but I don't know how to get the selected row id instead of `this` in the click function. Also I can't use `table` inside of itself. I don't know how to access the json data from inside. – Chazy Chaz Jan 03 '16 at 06:42
@ChazyChaz you actually already have the code. Since more than one row might be selected it returns an array (well actually a datatables object). You should be able to get the row array like this... table.rows( { selected: true } ), for the first selected row it would be table.rows( { selected: true } ).ids()[0]. https://datatables.net/reference/type/DataTables.Api – kurt Jan 03 '16 at 06:52
So I can use the var `table` inside itself? I need the data inside the functions of the buttons that are in the table initialization. I tried it, no error, but I'm getting undefined, in the url, instead of the integer. – Chazy Chaz Jan 03 '16 at 06:56
Same thing using `this.row()`. I just checked the network monitor and the data is ok ( id: 1 ). Why is giving undefined instead of the integer? – Chazy Chaz Jan 03 '16 at 07:06
Thanks, the fiddle is working ok, but I'm still getting `undefined` instead of the id (integer)... `alert( dt.row( { selected: true } ).id() )`. I know it has something to do with `columns: [ { data: 'id' }, ]` I think id() is something else than the first field. `alert(JSON.stringify(dt.row( { selected: true } ).data()));` -> `{"id":1...}`, I'm trying to access that value but I can't, I tried with `data(0)` and `data([0])` and other things but I just can't get the first value of the object... – Chazy Chaz Jan 04 '16 at 13:53

Bindrid · Answer 2 · 2016-01-06T04:15:03.893

I think you are a bit confused over the .id() function you are using. It does not return value of you data field called id. It returns the tr attribute of id. If you do not set it, it will return undefined.

if you return DT_RowId as part of your dataset, it will be added automatically. {id:5, DT_RowId:"5"}. Or, client side, use the JQuery map function to add the field before you use it. Because using a straight integer as an id, it could get you in trouble if it gets duplicated in another table or element so I ususally do something like this...

    var mydata =  [{"name": "Tiger Nixon", 
        "position": "System Architect",
        "salary": "$320,800",
        "start_date": "2011/04/25",
        "office": "Edinburgh",
        "extn": "5421"
     }];

Using the extn id, I map to the dt_rowid...

    $.map(mydata, function (item, key) {
        item["DT_RowId"] = item["extn"]});

then use that data in my table...

     $(document).ready(function() {

           $('#example').DataTable( {

              data:mydata,

               "columns": [
        { "data": "name" },
        { "data": "position" },
        { "data": "office" },
        { "data": "extn" },
        { "data": "start_date" },
        { "data": "salary" }

        ]

        } );

        } );

datatables buttons enable/disable example not working

2 Answers2

Linked