web-dev-qa-db-ja.com

新しいデータでDataTableを再描画する方法

私はこのトピックに関するいくつかの質問をstackoverflowですでにチェックしましたが、それらはすべて古いdataTableを使用しています。 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
});

それでもこれは機能しません。

jquerydatatables
41
user2881063

最初にテーブルをクリアしてから、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
});

また、古いデータテーブルAPI関数と新しいデータテーブルAPI関数のマッピングを検索する場合は、ブックマーク this

54
SSA

受け入れられた回答は、draw関数を2回呼び出します。なぜそれが必要なのかわかりません。実際、新しいデータに古いデータと同じ列がある場合、1行でこれを実現できます。

datatable.clear().rows.add(newData).draw();
23
Skeets
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();
});
1
vlasiliy

別の選択肢は

dtColumns[index].visible = false/true;

列を表示または非表示にします。

0
sankyyy