Come ridisegnare DataTable con nuovi dati

Question

Ho già controllato diverse domande su questo argomento qui in StackOverflow, ma tutte utilizzano il vecchio DataTable. Sto usando DataTable. Ho popolato il mio DataTable, non utilizzando lato server, quindi i dati sono precaricati (JSON) come questo:

datatable = $("#datatable").DataTable({ 
    data : myData, 
    moreoptions : moreoptions 
}); 

Io non ho avuto un problema con questo, il DataTable caricato bene. Ora voglio ri-popolare quello myData con i nuovi dati che ho caricato. Come ricaricare DataTable per riflettere le modifiche?

Ecco quello che ho provato finora:

$('#upload-new-data').on('click', function() { 
    myData = NewlyCreatedData; // I console logged this NewlyCreatedData, and it has my uploaded data. 

    datatable.draw(); // Redraw the DataTable 
}); 

Ma questo non funziona. Ho provato anche questo:

datatable = $("#datatable").DataTable({ 
    "data" : myData, 
    "drawCallback" : function() { 
     myData = NewlyCreatedData; 
    }, 
    "moreoptions" : moreoptions, 
}); 

Poi durante il caricamento mi basta chiamare il grilletto ridisegno:

$('#upload-new-data').on('click', function() { 
    datatable.draw(); // Redraw the DataTable 
}); 

Comunque questo non funziona.

Answer 1

È necessario prima cancellare la tabella e quindi aggiungere nuovi dati utilizzando la funzione row.add(). All'ultimo passo regolare anche la dimensione della colonna in modo che la tabella renda correttamente.

$('#upload-new-data').on('click', function() { 
    datatable.clear().draw(); 
    datatable.rows.add(NewlyCreatedData); // Add new data 
    datatable.columns.adjust().draw(); // Redraw the DataTable 
}); 

Inoltre se si vuole trovare una corrispondenza tra le funzioni vecchie e nuove API DataTable segnalibro this

Answer 2

datatable.rows().iterator('row', function (context, index) { 
    var data = this.row(index).data(); 
    var row = $(this.row(index).node()); 
    data[0] = 'new data'; 
    datatable.row(row).data(data).draw(); 
}); 

Answer 3

Un'altra alternativa è

dtColumns[index].visible = false/true; 

Per mostrare o nascondere qualsiasi colonna.

Answer 4

La risposta accettata chiama la funzione draw due volte. Non riesco a capire perché sarebbe necessario. Infatti, se i tuoi nuovi dati hanno le stesse colonne dei vecchi dati, puoi farlo in una riga:

datatable.clear().rows.add(newData).draw();