web-dev-qa-db-de.com

Wie kann man datierbare Zeilen oder Zellen anklickbar machen?

Ich arbeite an einer Verlaufsentwicklung eines bestimmten Benutzers und möchte, dass dies mit dataTables erfolgt. Ich kann jedoch nicht den Weg finden, mit dem ich meine Zeile oder eine bestimmte Zelle anklickbar machen kann. Ich muss separate Links mit den separaten Klicks für eine bestimmte Zeile öffnen. Jede Hilfe wäre dankbar. Danke im Voraus !!!

Editiert :: Wenn ich auf eine Zeile klicke, benötige ich alle Daten der Zeile, was kein Problem darstellt. Ich kann das machen. Was ich wissen muss, ist eine $ .ajax () - Anfrage mit diesen bestimmten Zeilendaten zu machen. Ich denke das wird reichen. Es wäre jedoch schön zu wissen, wie man einen Link in einer neuen Registerkarte öffnet.

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

17
Plabon Dutta

Um das Klicken auf die Zelle zu aktivieren, müssen Sie einen delegierten Ereignishandler verwenden. Dies funktioniert in jeder 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());
})

Das Abrufen von Daten einer angeklickten Zeile kann mit erfolgen 

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

Wenn Sie Zeileninhalt über AJAX senden möchten, sollten Sie das Array in ein Objekt umwandeln und dann als data einfügen: 

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

Wenn Sie nur eine einfache Verknüpfung in einer Zelle mit target: _blank wünschen, können Sie render verwenden: 

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

Stellen Sie zunächst sicher, dass Sie den Code Ihrer dataTable-Initialisierung ändern, um sie in einer solchen Variablen zu speichern

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

Dann können Sie allen Zeilen so ein Klickereignis zuweisen 

EDIT: Wie von Gyrocode.com ausgeführt, sollten wir delegierte Event-Handler verwenden, da die trs dynamisch erstellt werden, während wir die Seite öffnen. So sollte der Code aussehen.

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

Das muss dir helfen.

4
Rajshekar Reddy

auf meiner Seite funktionierte row: this.parentNode.rowIndex nicht. Ich habe stattdessen this.parentNode verwendet und arbeitete wie ein Zauber

0
Carl Verret

Wir benutzen:

  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
  }

Nicht sicher, dass dies der beste Ansatz ist, aber es funktioniert. Möge der Herr dich segnen :)

Entschuldigung, das ist TypeScript, aber es ist gar nicht so einfach in JS zu konvertieren.

0
danday74

Sie müssen einen Ereignishandler hinzufügen, indem Sie auf die Zellen (td) Ihrer Datentabelle klicken, und Sie müssen die Aktion definieren, die in diesem Ereignishandler verarbeitet werden soll.

datatables

ist eine großartige Quelle zum Anschauen und Herumspielen.

0
Ankit Tripathi