jQuery Datatable dynamische Bearbeitungsschaltfläche, die an jede Zeile angehängt ist

Question

völlig neu in Jquery und Datentabelle. Ich möchte eine Bearbeitungsschaltfläche hinzufügen, die ein colorbox-div aufruft, das das bearbeitbare Feld anzeigt. kann mir jemand in die richtige richtung zeigen, wie das erreicht werden kann?

Ich konnte eine sClass zu jedem Feld hinzufügen und fnDrawCallback Rückruf verwenden, um Colorbox von Feld aufzurufen. Aber das ist irgendwie unordentlich und ich habe nur einen Knopf am Ende jeder Zeile zum Bearbeiten. vielen Dank für Hinweise.

Answer 1

Ich würde empfehlen, mit dem ausgezeichneten DataTables Editable Plugin. Das Plugin macht es sehr einfach Felder direkt in der Tabelle zu bearbeiten.

Wenn Sie wirklich eine Schaltfläche in jeder Zeile haben möchten, können Sie sie entweder hinzufügen, wenn Sie die Tabelle serverside generieren, oder sie mit jQuery hinzufügen. Dann müssten Sie eine Aktion an die Schaltflächen binden.

Lassen Sie sagen, Sie die Tasten injizieren wollen, wird der Code so etwas wie dieses:

$('#form-id').delegate('.edit-button', 'click', function() { 
    // action 
}).find('.classname-of-field-for-button').html('<button class="edit-button">'); 

Answer 2

Sie können Sachen hinzufügen, indem fnCreatedCell Rückruf in einer Spaltendefinition in aoColumnDefs folgende fügt eine Schaltfläche in die erste Reihe mit einer Onclick-Ereignishandler, die in der ersten Spalte auf den Wert umleitet (das ist somthing Sie ändern könnte whant zu.

"aoColumnDefs" : [ 
        { 
         "aTargets": [0], 
         "fnCreatedCell" : function(nTd, sData, oData, iRow, iCol){ 
          var b = $('<button style="margin: 0">edit</button>'); 
          b.button(); 
          b.on('click',function(){ 
           document.location.href = oData[0]; 
           return false; 
          }); 
          $(nTd).empty(); 
          $(nTd).prepend(b); 
         } 
        },