手動で新しいJSONデータ

Question

私はプラグインjQuery datatablesを使用していますとDataTableのテーブルを更新し、私はページの下部にある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オプションビルドではない - 間違ってはいけない！）、これらのデータでテーブルを更新する。どのように私はdatatables APIを使用してそれを行うことができますか？ドキュメントは非常に混乱しており、私は解決策を見つけることができません。どんな助力も非常に高く評価されます。ありがとう。

を使用でき

Answer 1

SOLUTION：（注意：このソリューションは、DataTableのバージョン1.10.4（現時点では）ないレガシーバージョンのためです）：API documentation（1.10.15）パー

明確化、APIをすることができアクセス三つの方法

1. のDataTableの現代の定義（アッパーキャメルケース）：

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

2. のDataTableの従来の定義（下キャメルケース）：new構文を使用して

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

3. 。

   var datatable = ew $.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()

Answer 2

：

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

Jsfiddle

更新。現在のドキュメントはあまり良くありませんが、古いバージョンを使用しても問題ない場合は、legacy documentationを参照してください。

Answer 3

私の場合は、Jsonをテーブルに供給するための組み込みのajax APIを使用していません（これはデータテーブルのレンダリングコールバック内で実装するのが難しいフォーマットのためです）。

私の解決策は、onload関数の外側スコープに変数を作成し、データリフレッシュを処理する関数（たとえばvar table = null）を作成することでした。

それから私は、loadメソッドの

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

で私のテーブルをインスタンス化し、最終的には、リフレッシュを処理する関数で、私は（（クリアを呼び出す）およびdestroy）法、HTMLにデータをフェッチ以下のようなテーブル、および再インスタンス化データテーブル、：

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

私は誰かが、これは重宝しますね！ここで

Answer 4

はレガシー既存tablebodyを削除し、新しいそれを作成についてどのようにデータテーブル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);