web-dev-qa-db-fra.com

Comment rendre cliquable une ligne ou une cellule datatable?

Je travaille sur le développement de l'historique d'un utilisateur particulier et je veux que ce soit fait avec dataTables. Cependant, je ne trouve pas le moyen de rendre ma ligne ou une cellule particulière cliquable. Je dois ouvrir des liens séparés avec les clics séparés pour une ligne particulière. Toute aide serait appréciée. Merci d'avance !!!

Edited :: Si je clique sur une ligne, j'ai besoin de toutes les données de la ligne, ce qui ne pose pas de problème. Je peux le faire. Ce que j'ai besoin de savoir, c'est de faire une requête $ .ajax () avec les données de cette ligne. Je pense que cela va faire. Cependant, il serait bon de savoir comment ouvrir un lien dans un nouvel onglet lors d’un clic sur une ligne.

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

jquerydatatabledatatables
17
Plabon Dutta

Pour activer, cliquez sur la cellule, vous devez utiliser un gestionnaire d'événements délégué - cela fonctionnera sur n'importe quel 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());
})

La récupération des données d’une ligne cliquée peut être effectuée par 

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

Si vous souhaitez envoyer du contenu de ligne via AJAX, vous devez transformer le tableau en objet, puis l'inclure en tant que 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 vous voulez juste un lien simple dans une cellule avec target: _blank, vous pouvez utiliser render: 

columns: [
  { title: "Patient ID", class: "center", render: function(data, type, full, meta) {
     return '<a href="showdata/id?'+data+'" target=_blank>Show patient</a>'
  }
},
24
davidkonrad

Tout d’abord, assurez-vous de changer le code de votre initialisation dataTable pour l’enregistrer dans une variable comme celle-ci.

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

Ensuite, vous pouvez affecter un événement de clic à toutes les lignes comme celle-ci. 

EDIT: Comme l'a souligné Gyrocode.com, nous devrions utiliser un gestionnaire d'événements délégué, car les tr sont créés de manière dynamique lorsque nous lançons une recherche. Donc, le code devrait ressembler.

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

Cela doit vous aider.

4
Rajshekar Reddy

de mon côté, utiliser row: this.parentNode.rowIndex n'a pas fonctionné. J'ai utilisé this.parentNode à la place et j'ai travaillé comme un charme

0
Carl Verret

Nous utilisons:

  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
  }

Pas sûr que ce soit la meilleure approche mais ça fait le travail. Que Dieu vous bénisse :)

Toutes mes excuses, il s'agit de TypeScript, mais c'est une solution simple pour convertir en JS.

0
danday74

Vous devez ajouter un gestionnaire d'événements au clic sur les cellules (td) de votre datatable et définir l'action à traiter dans ce gestionnaire d'événements.

datatables

est une excellente source pour regarder et jouer.

0
Ankit Tripathi