Saltar al contenido

¿Cómo hacer que se pueda hacer clic en una fila o celda de la tabla de datos?

Solución:

Para activar, haga clic en la celda, debe usar un controlador de eventos delegado; esto funcionará en cualquier tabla de datos:

$('.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());
})

La recuperación de datos de una fila en la que se hizo clic se puede realizar mediante

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

Si desea enviar el contenido de la fila a través de AJAX, debe transformar la matriz en un objeto y luego incluirlo como 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) {
       ...
    }
})

Si solo desea un enlace simple en una celda con target: _blank puedes usar render :

columnas: [
  { title: "Patient ID", class: "center", render: function(data, type, full, meta) {
     return '<a href="https://foroayuda.es/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]) // le daremos el valor de esta fila en la que se hizo clic y el primer índice (td) // sus cosas van aquí});

Esto debe ayudarte.

¡Haz clic para puntuar esta entrada!
(Votos: 0 Promedio: 0)



Utiliza Nuestro Buscador

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *