Make jquery data table row clickable

I worked a lot on the jquery data table. In one project I had a requirement to make the all rows of the jquery data table click able. So it wasn’t a tough task but I spend some time to make it working. So I decided to share my working code with you guys.

To make it working I have to use the data table initComplete function. Please see the below sample code.

  "initComplete": function() {
                    if($('#tbl-mek-past-jobs tbody').find('tr').find('td').html()!=="No data available in table")
                        $('#tbl-mek-past-jobs tbody').on('click', 'tr', function () {
                            window.location.href = $(this).attr('href');
  "rowCallback": function (nRow,data) {
                    $(nRow).attr("href", "/Mechanic/Home/JobDetails?id=" + data[0] + "");

So in the above code I’m checking if data table has any record then make it click able otherwise not. I am also adding href to each row in the rowCallback method. So you need both of them to make it working.

Hope it works for you.


Posted by | View Post | View Group