Show modal details on row click event

giordano

I've created a responsive, bootstrap based data table that contains non-visible columns. I would like to display the modal details when clicking on the table row and not only when the button appears when the table is collapse. What I have currently working is shown below. It appears I'm close to a solution but how do I invoke and show the same modal details dialog as defined in the DataTable() function?

Thanks!

Chris

$('#data-table-id').on('click', 'tr', function() {
var table = $('#data-table-id').DataTable();
var tr = $(this).closest('tr');
var row = table.row(tr);

  // verifies the detail data from the selected row is correct.
  alert(row.data());

  // shows the detail data in line
  row.child( row.data() ).show();

} );