如何使用jQuery DataTables重新创建表

Question

我本质上是在使用顶部答案（来自sdespont）来破坏一些表。

我有一张表，向我显示了正在上传的.csv文件的状态。

FileuploadTable：

FileName FileType FileSize AvailableActions

我有第二个表，该表显示.csv文件中的数据。

我需要为用户提供重置表单的能力，即摆脱.csv并摆脱所有数据，分别destroy()两个表，并empty()最初存在的所有数据empty()它们empty() 。

这是我遇到的问题。

我似乎无法在destroy()和empty()之后设置 FileUploadTable的列标题。 当我尝试上传新文件时，元素仍在页面上，只是空的，尽管正在调用相同的初始化

在destroy()和empty()之后，我似乎无法摆脱 CSVTable中的列标题。 当我尝试上载不同的csv时，它会尝试将列标题与应已销毁的列标题匹配，但它们不匹配，因为尽管CSVTable被销毁并清空了，但列标题仍然存在...？

不知道我在想什么。 在初始创建时已正确设置了它们。

$(elem).DataTable() 

谁能给我展示销毁/清空数据表，然后用不同的数据重新初始化的基本工作实现，所以我可以尝试模仿它。 最近三天没有查看他们的文档，我的大脑感到茫然，没有任何进展。

我的数据对象的例子

[
    {
        //key = column title
        //"val" = data in row
        //object = row
        key: "val",
        //i.e.
        FirstName: "Bob",
        LastName: "Barker",
        Age: 800,
        //etc
    },
    //etc
]

Answer 1

好。 您可以使用Object.keys()对数据进行简单的迭代，该过程会即时生成一个包含相应data和title值的列对象：

var columns = [], keys = Object.keys(data[0]);
for (var i=0;i<keys.length;i++) {
   columns.push({ data: keys[i], title: keys[i] });
} 

在用于初始化表的常规函数​​中使用该函数，并在已经初始化的情况下注意销毁和清空：

var table = null;
function initTable(data) {
    var columns = [], keys = Object.keys(data[0]);
    for (var i=0;i<keys.length;i++) {
        columns.push({ data: keys[i], title: keys[i] });
    }                  
    if (table) {
        table.destroy();        
        $('#example').empty(); 
    }        
    table = $('#example').DataTable({
       data: data,
       columns : columns
    })  
} 

现在，假设以下是您的AJAX调用的success处理程序，或者您将获得应该填充到表中的新数据：

$('#insert1').on('click', function() {
  var data = [
    { FirstName: "Bob", LastName: "Barker", Age: 800 },
    { FirstName: "John", LastName: "Doe", Age: 'N/A' }
  ]    
  initTable(data);
})    
$('#insert2').on('click', function() {
  var data = [
    { Animal : "Lion", Taxon : 'Panthera leo' },
    { Animal : "Cheetah", Taxon : 'Acinonyx jubatus' }
  ]
  initTable(data);
})    

演示-> http://jsfiddle.net/d5pb3kto/