Datatables & jQuery - makes each row clickable or linked

Question

I need help understanding how to make each line “interactive” with datatables ...

On the server side, I use Coldfusion to process requests, etc. I show people information in the table provided by Datatables.net.

the help pages say that I should use a DOM / jQuery event handler, for example:

$(document).ready(function() { $('#example').dataTable(); $('#example tbody').on('click', 'tr', function () { var name = $('td', this).eq(0).text(); alert( 'You clicked on '+name+'\ row' ); } ); } ); 

So, this seems to be the route I want to take, but I'm not familiar enough with jQuery to facilitate what I want to do ...

Instead of “Alert”, what function, method or process will allow me to send data in my line to a new page?

In other words, how do I get the data inside the selected row and display it on a new page?

To give you a practical example: 1) the technical support technician clicks on the line containing the employee, 2) the information about the selected employee contained in the line, and is sent to a new page, for example, using a form or URL variable ... 3) parameters will exist until the password is reset or the account is unlocked.

Your help is always appreciated, thanks in advance.

Answer 1

Inside this function, you can call data() as follows:

 $(document).ready(function() { var table = $('#example').DataTable(); $('#example tbody').on('click', 'tr', function () { var data = table.row(this).data(); console.log(data); }); }); 

Here is the documentation: https://datatables.net/reference/api/row () .data ()

And for more info, this SO answer is well read here .

Answer 2

You can use the fnRowCallback event for a datatable and bind the click event to each row.

  var oTable = $('#data').dataTable({ "fnRowCallback": function (nRow, aData, iDisplayIndex) { // Bind click event $(nRow).click(function() { alert( 'You clicked on '+aData.name+'\ row' ); }); return nRow; } }); 

You will get the data of each row from the aData parameter.