How to add an onclick callback for button on every row of a DataTables table

Question

I have a table where each row has a button. I format the table using JS DataTables . I'd like to add an onclick callback to the button on each row.

Right now, I have the following:

$(document).ready(function(){
     $(".btn-email").click(send_email);
     $(".btn-fix").click(toggle_status);
});

However, this only adds the onclick callback to the buttons of the rows that are shown, ie when navigating to a new page of the table (since DataTables handles pagination), the buttons don't work.

I've tried the following without luck:

$("#jfTable").on( 'draw', function () {
    $(".btn-email").click(send_email);
    $(".btn-fix").click(toggle_status);
} );

What is the proper way to do this?

Answer 1

I hope something like this will help you because it did work for my case.

• You could add columns property, and on each column you could map your data object by name.
• You have access to whole data from object called "dataObject"
• So here I'm creating a link with an id from other column (dataObject.id). U could create function for button, and use it with OnClick event in button properties.

See my code:

 { columns: [{ data: "name", render: function(data, type, dataObject, meta) { return `<a class="col" id="${dataObject.id}">${data}</a>`; } }] } $(document.body).on("click", ".col", function(item) { console.log(item) }) 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 

Answer 2

I settled on something a bit simpler:

$(document).ready(function(){
  $('#jfTable').on('page.dt search.dt length.dt', function () {
    $(".btn-email").off("click").on("click", send_email);
    $(".btn-fix").off("click").on("click", toggle_status);
  });
});

page.dt , search.dt , or length.dt are fired when the datatable view is updated in the corresponding way. .off("click") avoids having a button with having multiple, identical click events attached (eg from a previous pagination).