jquery - una - ¿Cómo hacer que se pueda hacer clic en la fila o celda datable?

seleccionar una fila de una tabla html

Question

Estoy trabajando en el desarrollo de un historial de un usuario en particular y quiero que se haga con dataTables. Sin embargo, no puedo encontrar la forma en que puedo hacer que se pueda hacer clic en mi fila o en una celda en particular. Necesito abrir enlaces separados con los clics separados para una fila en particular. Cualquier ayuda sería apreciada. Gracias por adelantado !!!

Editado :: Si hago clic en una fila, necesito todos los datos de la fila, lo cual no es un problema. Yo puedo hacer eso. Lo que necesito saber es hacer una solicitud $ .ajax () con esos datos de fila en particular. Creo que esto servirá. Sin embargo, sería bueno saber cómo abrir un enlace en una nueva pestaña al hacer clic en la fila.

$(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

Debe agregar un controlador de eventos al hacer clic en las celdas (td) de su tabla de datos y debe definir la acción que desea procesar en ese administrador de eventos.

tablas de datos

Es una gran fuente para echar un vistazo y jugar.

Answer 2

Estamos usando:

  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
  }

No estoy seguro de que este sea el mejor enfoque, pero hace el trabajo. Que el Señor te bendiga :)

Disculpas, esto es TypeScript pero es muy sencillo de convertir a JS.

Answer 3

Para activar el 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 los datos de una fila pulsada se puede hacer por

$(''.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 incluirla 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 quieres un enlace plano en una celda con target: _blank puedes usar 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 4

Primero asegúrese de cambiar el código de la inicialización de la tabla de datos para guardar en una variable como esta

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

A continuación, puede asignar un evento de clic a todas las filas como esta

EDITAR: Como señalado por Gyrocode.com, deberíamos usar un controlador de eventos delegado ya que los tr se crean dinámicamente a medida que avanzamos. Así que el código debe ser similar.

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

Esto debe ayudarte.

Answer 5

en mi lado, usando la row: this.parentNode.rowIndex no funcionó. Utilicé this.parentNode en this.parentNode lugar y trabajé como un encanto