I've followed various examples but not found a solution yet. I have a MVC Web App, the data tables is loaded within a partial view (which then calls instantiateDataTable). I am adding my JS code to get the clicked row data in the view that called this partial view.
I have tried something like this, but both console.logs are coming back as undefined.
$('#resultsGrid tbody').on('click', function() {
var row = $(this).parents('tr')[0];
//for row data
//console.log(table.row(row).data().id);
var data = $('resultsGrid').DataTable().row(this).data();
console.log(row);
console.log(data);
});
See JS Fiddle
https://jsfiddle.net/p2one80j/1/
Any advise on why my code isn't working? TIA
Use this code instead:
$(document).ready(function() {
var myTable = $('#resultsGrid').DataTable( {
} );
$('#resultsGrid tbody tr').on('click', function() {
var data = myTable.row(this).data();
console.log(data);
});
} );
Output:
["102", "A name", "222 The Street", "A City", "IL", "90210", ""]
["100", "A Name", "123 The Street", "A City", "IL", "90210", ""]