jQuery Datatable botón de edición dinámica adjunto a cada fila

Question

totalmente nuevo para jquery y datatable. Me gustaría agregar un botón de edición que invoque un colorbox div que muestre todo el campo editable. ¿Alguien puede señalarme en la dirección correcta sobre cómo se puede lograr esto?

Pude agregar un sClass a cada campo y usar la devolución de llamada fnDrawCallback para llamar al colorbox del campo. Pero esto es un poco complicado y prefiero tener un botón al final de cada fila para editarlo. muchas gracias por cualquier punteros.

Answer 1

Recomendaría utilizar el excelente complemento DataTables Editable. El complemento hace que sea muy fácil editar campos directamente en la tabla.

Si realmente desea tener un botón en cada fila, puede agregarlo cuando genera la tabla en el lado del servidor, o agregarla usando jQuery. Entonces necesitarías vincular una acción a los botones.

Digamos que desea inyectar los botones, el código se convierte en algo parecido a esto:

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

Answer 2

Puede agregar cosas por fnCreatedCell de devolución de llamada en una definición de columna en aoColumnDefs la siguiente añade un botón a la primera fila , con un controlador de eventos onclick que redirige al valor de la primera columna (esto es somthing es posible que whant a cambiar.

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