Unable to read property "_aData" from undefined (...) - Datatables

Question

I am trying to read data() from a cell in a datatable that has a button inside, but I get an en error.

This is my datatable definition:

 $("#example").DataTable({ destroy: true, "columnDefs": [{ orderable: false, targets: 0 }], "columns": [ { "data": "slno", "fnCreatedCell": function (nTd, sData, oData, iRow, iCol) { $(nTd).html('<a href="AddNewTicket.aspx?subjectID=' + oData.subjectID + '&subject_id=' + oData.subject_id + '&serviceID=' + oData.crm_services_id + '&severityID=' + oData.severityID + '&statusID=' + oData.statusID + '&callerID=' + '66355356' + '">' + oData.slno + '</a>'); }, }, { "data": "status_message" }, { "data": "crm_services_id" }, { "data": "subject_id" }, { "data": "severity_id" }, {"data": "user_id" }, { "data": "status_id" }, { "data": "caller_number", "fnCreatedCell": function (nTd, sData, oData, iRow, iCol) { $(nTd).html('<button class="btn btn-primary" id= "' + oData.subjectID + '">Call Customer</button>'); }, } ], select: { style: 'os', selector: 'td:first-child' }, "data": response, "sDom": '<"top">tip' }); 

And this is where I am trying to extract the data:

 var table = $("#example").DataTable(); $('#example tbody').on('click', 'button', function () { var subjectID = $(this).attr('id'); var thisData = table.row($(this).parents('tr')).data(); var userID = thisData[7]; sendCallRequest(subjectID, userID); }); 

Here is the error I get:

Unable to read property '_aData' from undefined (...)

Any suggestions please?

Answer 1

Try undoing the event for your buttons before you reassign them:

 var table = $("#example").DataTable(); $('#example tbody').off('click'); $('#example tbody').on('click', 'button', function () { var subjectID = $(this).attr('id'); var thisData = table.row($(this).parents('tr')).data(); var userID = thisData[7]; sendCallRequest(subjectID, userID); }); 

Why I propose the following: I have a pretty similar problem when DataTables cannot raise a rowReorder event. I also create my table via AJAX / dynamically (which you seem to be doing too), so obviously my event listener (in my case for table.on ('row-reorder')) has been bound several times. After removing the event listener for the first time and reading it, I finally got it to work.