Come aggiornare DataTables

Question

Sto utilizzando il plug-in DataTables per rendere la mia tabella interattiva.

La tabella è echo'd da PHP sulla pagina.

Quando aggiungo un record al DB, sto caricando la tabella utilizzando jQuery load() ma questo interrompe DataTable.

Come aggiornare la tabella mantenendo i DataTable intatti?

Nota: sto utilizzando DOM come origine dati e non elaborazione lato server.

Answer 1

Se si esegue un ricaricamento completo dell'intera tabella, avvolgere il codice di inizializzazione delle carte dati iniziali in una funzione. Chiama quella funzione al caricamento della pagina. Quando si sostituisce completamente la tabella con ajax, è probabile che si rimuova il div padre della tabella creato dal plugin come wrapper per tutti gli elementi DOm non tabella che crea. Se ID tabella = "esempio", wrapper id = "example_wrapper".

Ecco un numero sufficiente di codice che potrebbe farti star bene sulla tua strada. Ci sono modi semplici per solo aggiornare righe ma dal momento che è richiesta per un tavolo ricarica completa Ho seguito che

function initDataTables(){ 
    $('#myTable').datatables({/* put all current options here*/}) 

} 


/* within ready event of pageload */ 

$(function(){ 
    initDataTables(); 
    /* all other page load code*/ 

}); 

/* use $.get to reload table */ 

$.get(tableUpdateUrl, data, function(returnData){ 

    $('#myTable').parent().replaceWith(returnData); 

    /* re-initalize plugin*/ 

    initDataTables(); 
}); 

Answer 2

Dovresti essere in grado di utilizzare il plug-in ajax. http://datatables.net/plug-ins/api

Answer 3

Quando si crea la tua tabella di dati, assegnare il valore risultante in una variabile:

var table = $(".something").dataTable(); 

Quando crei il tuo nuovo oggetto, presumibilmente tramite AJAX, assicurati di restituire le proprietà che il tuo tavolo deve visualizzare. Quindi, nella tua funzione success, puoi utilizzare il metodo fnAddData per aggiungere una nuova riga alla tua tabella. Questo metodo prende in un array di valori, il primo va nella prima colonna, secondo nella seconda, e così via:

success: function(response){ 
    table.fnAddData([ 
     response.id, 
     response.name, 
     response.description, 
    ]); 
} 

Puoi leggere altro sul fnAddData metodo here.