Wie füge ich eine Schaltfläche in den Zellen der Datentabelle hinzu, um Details im Popup anzuzeigen?

Question

Meine Frage ist zu datatable.js. Ich möchte Knopf innerhalb der Zellen der Datatable-Spalten hinzufügen, um Tetail der Inhaltszelle zu erweitern. Wenn ich auf den roten Knopf klicke, sollte ein Popupmodal erscheinen, um alle Inhalte in datatable.js anzuzeigen.

Answer 1

 
You can use fnRowCallback 
https://legacy.datatables.net/ref#fnRowCallback 

$('#example').dataTable({ 
"fnRowCallback": function(nRow,aData,iDisplayIndex,iDisplayIndexFull) { 
    // Bold the grade for all 'A' grade browsers 
    if (aData[4] == "A") 
    { 
    $('td:eq(4)', nRow).html(' <button type="button">Red button </button> '); 
    } 
} 

});

Answer 2

Mit Hilfe der grundlegenden jQuery-Funktionen ist es vollständig möglich, dies zu tun.

Zunächst einmal, überprüfen Sie bitte diese beiden Beispiele:

Example 1 und Example 2

Wie im Beispiel zu sehen;

Sie können der Zielspalte einen "defaultContent" hinzufügen (und es kann eine Schaltfläche sein!). In diesem Beispiel ist es die letzte Spalte in der Tabelle. Und Sie können dem onclick-Ereignis dieser Schaltfläche alle Funktionen zuweisen.

Oder alternativ können Sie Zeilen Klicks wie erkennen;

$('#example tbody').on('click', 'tr', function() { 
    var data = table.row(this).data(); 
    alert('You clicked on '+data[0]+'\'s row'); 
}); 

und öffnen Sie eine Bootstrap-modal wie $("#myModal").modal() statt,

alert('You clicked on '+data[0]+'\'s row');.