在javascript中添加和删除dataTables源数组中的项目

Question

我有一个DataTables表，我需要使用javascript对象作为数据源，用户可以从DataTables documentation添加和删除项目，只显示固定数组如何用作数据源。将项添加或删除到数组变量时，以下代码不起作用。假设app.array存在并且是一个Knockout可观察数组

  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++;
})

演示 - ＆gt;的 http://jsfiddle.net/y79cwjmy/

遗漏了淘汰特定的特性以便澄清。要使用可观察数组和dataTables，可以使用subscribe和第二个将可观察内容传递给的数组：

var data = ko.observableArray([]);
var dt_data = [];
var table;

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

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

data.subscribe(function(changes) {
  dt_data = changes;
  render();
});

演示 - ＆gt;的 http://jsfiddle.net/dkgpb8y6/