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?

$('#tblEvent input[type="checkbox"]).click(function() { ... — user3559349
– user3559349, Commented May 13, 2015 at 9:25

davidkonrad · Accepted Answer · 2015-05-13 10:10:54Z

23

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/

answered May 13, 2015 at 10:10

davidkonrad

85.7k17 gold badges211 silver badges273 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Willy Over a year ago

thanks, it also works, I think datatables has a special/built-in function to handle this, but from the answers I've got, it can be done by using jQuery

davidkonrad Over a year ago

@Willy, no - not really. An alternative would be to listen on dataTables draw.dt event. dataTables renders everything from a cached set of rows and columns, this often conflicts with developers desire to add special functionality to DOM-elements. But glad to hear you got it to work :)

Gyrocode.com Over a year ago

@Willy, please accept the answer if it helped you out! Marking it as accepted closes the question and indicates to future users having the same problem, that this is a valid solution.

Tamás Mazuk · Accepted Answer · 2017-05-05 12:40:45Z

5

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 ) {});

edited May 5, 2017 at 12:40

answered May 5, 2017 at 9:52

Tamás Mazuk

1412 silver badges8 bronze badges

1 Comment

milo526 Over a year ago

Please include the relevant code or information from your links in your answer since links are prone to breaking

Collectives™ on Stack Overflow

How to handle checkbox click event in datatables

2 Answers 2

3 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related