如何用新數據重新繪製DataTable

Question

我已經在stackoverflow中檢查了關於此主題的幾個問題，但它們都使用舊的dataTable。我正在使用DataTable。我不使用服務器端的填充我的數據表，所以數據預裝（JSON）是這樣的：

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

我沒有用的問題，DataTable中加載就好了。現在我想用我上傳的新數據重新填充myData。如何重新加載DataTable以反映更改？

這是我迄今爲止嘗試：

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

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

但是，這是行不通的。我也試過這樣：

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

然後在上傳我只是調用重繪觸發：

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

不過，這並不工作。

Answer 1

您必須先清空表格，然後使用row.add（）函數添加新數據。最後一步還要調整列大小，以便表格正確呈現。

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

此外，如果你想找到新的老的DataTable API函數之間的映射書籤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

另一種方法是

dtColumns[index].visible = false/true; 

顯示或隱藏任何列。

Answer 4

接受的答案兩次調用draw函數。我看不出爲什麼會這樣。事實上，如果你的新數據與舊數據有相同的列，你可以在一行中完成：

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