How to handle checkbox click event in datatables

Question

I have a boolean field like a flag to state that row is deleted or not in the table. It displayed using checkbox, so if the data has been deleted, the checkbox value is true and vice versa.

Below is the code to display the table:

<table id="tblEvent" class="display" cellspacing="0" style="width: 100%">
    <thead>
        <tr>
            <th>@Html.DisplayNameFor(model => model.PIC)</th>
            <th>@Html.DisplayNameFor(model => model.Name)</th>
            <th>@Html.DisplayNameFor(model => model.StartDate)</th>
            <th>@Html.DisplayNameFor(model => model.Status)</th>
        </tr>
    </thead>
    <tbody>
        @foreach (var item in Model)
        {
            <tr>
                <td>@Html.DisplayFor(modelItem => item.PIC)</td>
                <td>@Html.DisplayFor(modelItem => item.Name)</td>
                <td>@Html.DisplayFor(modelItem => item.StartDate)</td>
                <td>@Html.EditorFor(modelItem => item.Status)</td>
            </tr>
        }
    </tbody>
</table>

$(document).ready(function () {
    $("#tblEvent").dataTable({
        "order": [[1, "desc"]]
    });
});

In the table I can click the checkbox but I don't know how to handle the click event because I'm using datatables to display the data. How to handle checkbox event using datatable?

Answer 1

I guess you are using a paginated table, and are facing the problem that your click handler not are working when you change pages?

The solution suggested in comments would work on a 1-page dataTable, but is useless if you change pages or the dataTable otherwise is redrawn :

$('#tblEvent input[type="checkbox"]').click(function() {
    console.log('suggested-in-comment', 'click');
});

...Only works on the first page. You must use a delegated event to be sure that the checkboxes always is bound to the click-handler :

$('#tblEvent').on('click', 'input[type="checkbox"]', function() {
    console.log('best', 'click');
});    

demo with both / proof of concept -> http://jsfiddle.net/o4mhqpr3/

Answer 2

If you are using datatables with selection capabilities you can use listeners (select and deselect events).

table.on( 'deselect', function ( e, dt, type, indexes ) {});
table.on( 'select', function ( e, dt, type, indexes ) {});