CODEWITHSUNDEEP
jqueryeventscheckboxdatatables
Mr. Blond
Mr. Blond

Reputation: 1167

Bind change event to checkbox in each DataTables row

I have added a checkbox for each row in DataTables. When table data is loaded, I bind change event to each checkbox like this: 

fnInitComplete: function(oSettings, json) {

      $("input[type='checkbox']").on("change", function() {

            // checking if any checkbox is checked

      });
}

The problem is that change event is added only for the first page. If I navigate to other pages and click on any checkbox, no event is fired. It works only if I refresh the page. Same is with Show entries. What would be a clever way to deal with this issue?

Table data

Upvotes: 6

Views: 9626

Answers (2)

Sebastianb
Sebastianb

Reputation: 2060

Try using delegated events:

$("#table_id").on('change',"input[type='checkbox']",function(e){
    //your code 
});

This tells the table to run the specified function when a 'change' event originated from an input[type='checkbox'] that is its descendant.

You don't need to register this handler in the table initialization by the way, you can just do it after the document is ready.

More about delegated events

Upvotes: 11

Nalin Aggarwal
Nalin Aggarwal

Reputation: 888

You can place your code here .on( 'page.dt', function () { // do something}) check the link for more explanation about this or you could place this event around with below code.

$(function(){$("input[type='checkbox']").on("change", function() {

            // checking if any checkbox is checked

      });})

Upvotes: 1

Related Questions