How to make datatable row or cell clickable?

Question

I'm working on a history development of a particular user and I want it to be done with dataTables. However, I cannot find the way with which I can make my row or a particular cell clickable. I need to open separate links with the separate clicks for particular row. Any help would be appreciated. Thanks in advance !!!

Edited:: If I click on a row, I need all the data of the row, which is not a problem. I can do that. What I need to know is to make an $.ajax() request with that particular row data. I think this will do. However, it would be great to know how to open a link in a new tab on row click.

$(document).ready(function() {      var dataSet = [          []      ];      $.ajax({          type: 'POST',          url: "webservices/view_patient_medical_history.php",          async: false,          //data: {'log_id': data},          success: function(response) {              dataSet = JSON.parse(response);          }      });        //   var dataSet_arr = jQuery.makeArray(dataSet['responseText']);        $('#patient_medical_history').DataTable({          data: dataSet,          columns: [{              title: "Patient ID",              class: "center"          }, {              title: "Current Medications",              class: "center"          }, {              title: "Allergies",              class: "center"          }, {              title: "Diabetes",              class: "center"          }, {              title: "Asthma",              class: "center"          }, {              title: "Arthritis",              class: "center"          }, {              title: "High Blood Pressure",              class: "center"          }, {              title: "Kidney Problem",              class: "center"          }, {              title: "Liver Problem",              class: "center"          }, {              title: "Heart Problem",              class: "center"          }, {              title: "Other Problems",              class: "center"          }, {              title: "Present Problem",              class: "center"          }, {              title: "Last Updated",              class: "center"          }],          "scrollX": true,          //"paging": false,          "info": false,          //"lengthMenu": false,          dom: 'lBfrtip',          buttons: [              'copy', 'pdf', 'print'          ]              /*"paging": false,          "info": false,           dom: 'Bfrtip',           buttons: [              'excel', 'pdf', 'print'          ]*/      });        $('th').css("white-space", "nowrap");  });

Answer 1

To activate click on cell you must use a delegated event handler - this will work on any dataTable :

$('.dataTable').on('click', 'tbody td', function() {    //get textContent of the TD   console.log('TD cell textContent : ', this.textContent)    //get the value of the TD using the API    console.log('value by API : ', table.cell({ row: this.parentNode.rowIndex, column : this.cellIndex }).data()); }) 

Retrieving data of a clicked row can be done by

$('.dataTable').on('click', 'tbody tr', function() {   console.log('API row values : ', table.row(this).data()); }) 

If you want to send row content via AJAX you should transform the array to an object, and then include it as data :

$('.dataTable').on('click', 'tbody tr', function() {   var data = table.row(this).data().map(function(item, index) {      var r = {}; r['col'+index]=item; return r;   })   //now use AJAX with data, which is on the form [ { col1 : value, col2: value ..}]   $.ajax({     data: data,     url: url,     success: function(response) {        ...     } }) 

If you just want a plain link in a cell with target: _blank you can use render :

columns: [   { title: "Patient ID", class: "center", render: function(data, type, full, meta) {      return '<a href="showdata/id?'+data+'" target=_blank>Show patient</a>'   } }, 

Answer 2

First make sure you change the code of your dataTable initialization to save into a variable like this

var oPatientMedicalHistory = $('#patient_medical_history').DataTable({    //your stuff }); 

Then you can assign a click event to all the rows like this

EDIT: As Pointed out by Gyrocode.com, we should use delegated event handler as the tr's are created dynamically as we page. So The code should look like.

$('#patient_medical_history tbody').on('dblclick','tr', function() {     var currentRowData = oPatientMedicalHistory.row(this).data();     // alert(currentRowData[0]) // wil give you the value of this clicked row and first index (td)     //your stuff goes here }); 

This must help you out.