Changing the text of a button dynamically with rows selected

miltonbarboza

I have the following code:

$(document).ready(function() {
    var table = $('#defTable').DataTable({
        select: {
            style: 'multi'
        },
        dom: 'Bfrtip',
        buttons: [
            {
                extend: 'selected',
                text: 'Delete',
                className: 'delete'
            }
        ]
    });

    $('#defTable tbody').on('click', 'tr', function(){
        var count = table.rows({selected: true}).count();
        $('.delete').text('Delete ('+count+')');
    });
} );

When I first click on a row, the count shows 0. When I click on another row, count is 1. When I deselect one row, it shows 2.

I understand that this function is being executed before the Select Extension changes the row to selected, so how can I fix this?

In other words, I want that the button shows the selected rows the same way as it is shown in the select-info class in the end of the table (# rows selected)

kthorngren

I think you can use the select extension's select and deselect events for what you want:
https://datatables.net/reference/event/#select

Kevin