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.

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>'
  }
},