DataTableでjavascript配列を再読み込み/更新するには

Question

私はDataTableを使用して検索機能からデータを表示しています。これがDataTableにデータを渡す方法であれば確信しています。私は空のJavaScript配列でDataTableを初期化しています。それから、私はDatatablesを別の関数に入れたいと思っています。

$（）。DataTable（）。ajax.reload（）と$（）。DataTable（）。fnAddData（dataSet）を試しましたが、両方とも機能しませんでした。

https://jsfiddle.net/owxz7e22/3/

<table id="test" class="table table-striped table-bordered table-hover dt-responsive"> 
</table> 

<a href="#" onclick="LoadData();">Test</a> 


$(document).ready(function() 
    { 

     $('#test').DataTable({ 
      data: dataSet, 
      columns: [ 
       { title: "Name" }, 
       { title: "Position" }, 
       { title: "Office" }, 
       { title: "Extn." }, 
       { title: "Start date" }, 
       { title: "Salary" } 
      ] 
     }); 
    }); 

    var dataSet = []; 

    function LoadData() 
    { 
     dataSet = [ 
       ["Tiger Nixon", "System Architect", "Edinburgh", "5421", "2011/04/25", "$320,800"], 
       ["Garrett Winters", "Accountant", "Tokyo", "8422", "2011/07/25", "$170,750"], 
       ["Ashton Cox", "Junior Technical Author", "San Francisco", "1562", "2009/01/12", "$86,000"], 
     ]; 

     var tbl = $('#test').DataTable(); 

     tbl.fnClearTable(); 
     tbl.fnDraw(); 
     tbl.fnAddData(dataSet); 


     //$('#test').DataTable().ajax.reload(); 

    } 

Answer 1

あなたは変数に自分のデータテーブルを格納し、行を追加する必要があります。 ここを見て： https://jsfiddle.net/63235xk2/

$(document).ready(function() 
     { 
      var dataSet = []; 

      var datatable = $('#test').DataTable({ 
       data: dataSet, 
       columns: [ 
        { title: "Name" }, 
        { title: "Position" }, 
        { title: "Office" }, 
        { title: "Extn." }, 
        { title: "Start date" }, 
        { title: "Salary" } 
       ] 
      }); 


     $('.asd').on('click',function(){ 
       dataSet = [ 
        ["Tiger Nixon", "System Architect", "Edinburgh", "5421", "2011/04/25", "$320,800"], 
        ["Garrett Winters", "Accountant", "Tokyo", "8422", "2011/07/25", "$170,750"], 
        ["Ashton Cox", "Junior Technical Author", "San Francisco", "1562", "2009/01/12", "$86,000"], 
      ]; 

     alert(dataSet.length); 

      datatable.clear(); 
      datatable.rows.add(dataSet); 
      datatable.draw(); 
     }); 

     }); 

Answer 2

をAJAXコールバック関数を定義することによって、それがロードすることを可能にしますajax.reload datatable関数を使用することで、配列やその他のデータソースからのデータを簡単に取得できます。

また、このソリューションは、既存の行の状態を保持します。

例：

var table = $('#mytable').DataTable({ 
     ,ajax: function (data, callback, settings) { 
       callback({ data: table_data }) //reloads data 
      } 
}); 

//at some event, reload the table 
$(#some-button).on('click', function() { 
    table.ajax.reload(); 
}