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 particu

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

We are using:

  rowCallback: function (row: Node /*, data: any[] | Object, index: number */) {

    // Intercept clicking of datatable links to avoid a full page refresh
    $('a', row).click(function (e) {
      e.preventDefault()
      // const href = $(this).attr('href')
      // parent.router.navigate([href])
    })

    // Navigate using anchor in cell to make entire cell clickable
    $('td', row).click(function (/* e */) {
      const anchor = $(this).find('a:first')[0]
      if (anchor) {
        const href = $(anchor).attr('href')
        parent.router.navigate([href])
      }
    })

    return row
  }

Not sure this is the best approach but it does the job. May the Lord bless you :)

Apologies this is TypeScript but its dead simple to convert to JS.

Answer 3

on my side, using row: this.parentNode.rowIndex didn't worked. I used this.parentNode instead and worked like a charm

Answer 4

You need to add an eventhandler on click to cells(td) of your datatable and you have to define the action what you want to process in that eventhandler.

datatables

is a great source to have a look over and play around.

Answer 5

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.