javacriptのdataTablesソース配列からアイテムを追加および削除する

Question

私はDataTablesテーブルを持っています。ユーザーがDataTableからアイテムを追加したり削除したりできるデータソースとしてJavaScriptオブジェクトを使用する必要があります。documentationは、データソースとして使用することができます。項目が配列変数に追加または削除された場合、以下のコードは機能しません。 app.array存在しているノックアウト観察可能な配列

var files; 
    $.each(app.array(), function(){ 
     data = "{ \"name\":\"" + this.name.toString() + "\",\"bytes\":\"" + this.bytes.toString() + "\",\"type\":\"" + this.type.toString() + "\"}"; 
     files.push(data); 
    var table = $("#table").DataTable({ 
    "data": files 
    , "language":{ 
     "emptyTable": "Nothing is here." 
    } 

    , "columnDefs": [ 
     { targets: [0], visible: true, searchable:false} 

    ] 
    "columns": [ 
     {"data": "name"} 
     ,{"data": "bytes"} 
     ,{"data": "type"} 
    ] 

}); 

Answer 1

を使用destroy: true、あなたが配列を更新したたびに再初期化を前提としています。ここではそれを行うための仕組みである：

var data = []; 
var table; 

function render() { 
    table = $('#example').DataTable({ 
    destroy: true, 
    data: data, 
    columns: [ 
     { data: "name" }, 
     { data: "bytes" }, 
     { data: "type" } 
    ] 
    }) 
} 
render(); 

var counter = 1; 
$('#add').on('click', function() { 
    data.push({ 'name': counter, 'bytes': counter, 'type': counter }) 
    render(); 
    counter++; 
}) 

デモ - >http://jsfiddle.net/y79cwjmy/

は、明確化のためのノックアウト特定の特殊性を残しています。それは再レンダリングのいくつかのフォームを持っていない場合>http://jsfiddle.net/dkgpb8y6/