datatables buttons enable/disable example not work

问题:

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
},

回答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

回答2:

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" }

        ]

        } );

        } );