Datatables & JQuery - make each row clickable or linkable

5
votes

I need some help in understanding how to make each row "clickable" with Datatables...

Server-side, I'm using Coldfusion to handle queries, etc. I display information about people in a Table rendered by Datatables.net.

The help pages say I ought to use a DOM / jQuery Event hander, like this:

    $(document).ready(function() {
    $('#example').dataTable();

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

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

Instead of an "Alert", what function, method, or process will allow me to send the data in my row to a new page?

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

To give you a practical example: 1) a service-desk technician clicks a row containing an employee, 2) info about the selected employee contained in the row, and is sent to a new page, like a form submit, or a URL variable... 3) options will exist to reset a password or unlock an account.

Your help is always appreciated, thank you in advance.

2
jquerycoldfusiondatatables

2 Answers

6
votes

Within that function you can call data() like so:

$(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 additional information, this SO answer here is a good read.

3
votes

You can use fnRowCallback event of datatable and bind 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+'\'s row' );

                });

                return nRow;
           }
    });

You will get data of each row from aData parameter.