How to make datatable row or cell clickable? How to make datatable row or cell clickable? jquery jquery

How to make datatable row or cell clickable?


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


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.


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.