Come rendere selezionabile una riga o una cella dati?

Question

Sto lavorando ad uno sviluppo storico di un particolare utente e voglio che sia fatto con dataTables. Tuttavia, non riesco a trovare il modo con cui posso rendere cliccabile la mia riga o una particolare cella. Devo aprire collegamenti separati con i clic separati per una riga particolare. Qualsiasi aiuto sarebbe apprezzato. Grazie in anticipo !!!

Modificato: se faccio clic su una riga, ho bisogno di tutti i dati della riga, che non è un problema. Posso farlo. Quello che devo sapere è creare una richiesta $ .ajax() con quei particolari dati di riga. Penso che lo farà. Tuttavia, sarebbe bello sapere come aprire un link in una nuova scheda sul clic di riga.

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

Per attivare clic sulla cella è necessario utilizzare un gestore di eventi delegato - questo funziona su qualsiasi 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()); 
}) 

Recupero dei dati di una riga cliccato può essere fatto da

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

Se vuoi inviare il contenuto di una riga tramite AJAX dovresti trasformare la matrice in un oggetto e quindi includerla come 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) { 
     ... 
    } 
}) 

Se si desidera solo un collegamento semplice in una cella con target: _blank è possibile utilizzare 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

È necessario aggiungere un EventHandler al clic di cellule (TD) del vostro DataTable e si deve definire l'azione ciò che si desidera elaborare in quel EventHandler.

datatables

è una grande fonte per avere uno sguardo più e giocare.

Answer 3

Prima di tutto assicuratevi di cambiare il codice del vostro inizializzazione dataTable per salvare in una variabile come questo

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

Quindi è possibile assegnare un evento click a tutte le righe come questo

EDIT: Come sottolineato da Gyrocode.com, dovremmo usare il gestore di eventi delegato poiché i tr sono creati dinamicamente come noi pagina. Quindi il codice dovrebbe essere simile.

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

Questo deve aiutarti.