web-dev-qa-db-ja.com

新しいJSONデータでdatatablesテーブルを手動で更新する方法

プラグイン jQuery datatables を使用して、ページの下部にあるDOMにロードしたデータをロードし、この方法でプラグインを開始します。

var myData = [
    {
        "id": 1,
        "first_name": "John",
        "last_name": "Doe"
    }
];

$('#table').dataTable({
    data: myData
        columns: [
        { data: 'id' },
        { data: 'first_name' },
        { data: 'last_name' }
    ]
});

今。何らかのアクションを実行した後、ajaxを使用して新しいデータを取得します（ただし、データテーブルにajaxオプションを作成しないでください。誤解しないでください！）。これらのデータでテーブルを更新します。データテーブルAPIを使用してどのように行うことができますか？ドキュメントは非常に紛らわしく、解決策が見つかりません。どんな助けも大歓迎です。ありがとう。

jquerydatatablesjquery-datatables
79
covfefe

SOLUTION：（注意：このソリューションは、データテーブルバージョン1.10.4（現時点では）レガシーバージョンではありません）。

説明APIドキュメント （1.10.15）に従って、APIには3つの方法でアクセスできます。

  1. DataTablesの最新の定義（ラクダの大文字）：

    var datatable = $( selector ).DataTable();

  2. DataTablesの従来の定義（ラクダ小文字）：

    var datatable = $( selector ).dataTable().api();

  3. new構文を使用します。

    var datatable = new $.fn.dataTable.Api( selector );

次に、次のようにデータをロードします。

$.get('myUrl', function(newDataArray) {
    datatable.clear();
    datatable.rows.add(newDataArray);
    datatable.draw();
});

APIリファレンス：

https://datatables.net/reference/api/clear（）

https://datatables.net/reference/api/rows.add（）

https://datatables.net/reference/api/draw（）

143
covfefe

次を使用できます。

$('#table').dataTable().fnClearTable();
$('#table').dataTable().fnAddData(myData2);

Jsfiddle

更新。はい、現在のドキュメントはあまり良くありませんが、古いバージョンを使用しても大丈夫なら legacy documentation を参照できます。

26
Vladimirs

古いデータテーブルインスタンスを破棄してから、データテーブルを再初期化する必要があります

最初に$。fn.dataTable.isDataTableを使用して、データテーブルインスタンスが存在するかどうかを確認します

存在する場合、それを破棄し、このような新しいインスタンスを作成します

    if ($.fn.dataTable.isDataTable('#dataTableExample')) {
        $('#dataTableExample').DataTable().destroy();
    }

    $('#dataTableExample').DataTable({
        responsive: true,
        destroy: true
    });
5
Om Sharma

私の場合、ビルトインajax apiを使用してJsonをテーブルにフィードしていません（これは、データテーブルのレンダリングコールバック内に実装するのがかなり困難だったフォーマットのためです）。

私の解決策は、onload関数とデータ更新を処理する関数（var table = nullなど）の外部スコープで変数を作成することでした。

次に、on loadメソッドでテーブルをインスタンス化します

$(function () {
            //.... some code here
            table = $("#detailReportTable").DataTable();
            .... more code here
        });

最後に、リフレッシュを処理する関数で、clear（）およびdestroy（）メソッドを呼び出し、データをhtmlテーブルにフェッチし、データテーブルを再インスタンス化します。

function getOrderDetail() {
            table.clear();
            table.destroy();
            ...
            $.ajax({
             //.....api call here
            });
            ....
            table = $("#detailReportTable").DataTable();
   }

誰かがこれが役に立つと思うことを願っています！

4
jorge cordero

レガシーデータテーブル1.9.4のソリューションを次に示します

    var myData = [
      {
        "id": 1,
        "first_name": "Andy",
        "last_name": "Anderson"
      }
   ];
    var myData2 = [
      {
        "id": 2,
        "first_name": "Bob",
        "last_name": "Benson"
      }
    ];

  $('#table').dataTable({
  //  data: myData,
       aoColumns: [
         { mData: 'id' },
         { mData: 'first_name' },
         { mData: 'last_name' }
      ]
  });

 $('#table').dataTable().fnClearTable();
 $('#table').dataTable().fnAddData(myData2);
2
Vikas