Question

I'm essentially using the top answer here ( from sdespont) to try to destroy some tables.

我有一个表格显示正在上传的.csv文件的状态。

FileuploadTable：

FileName FileType FileSize AvailableActions

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

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

以下是我遇到的问题。

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

destroy()和empty()后，我无法删除中CSVTable中的列标题。当我尝试上传不同的csv时，它会尝试将列标题与应该被销毁的匹配，但它们不匹配，因为尽管CSVTable已被销毁并清空，但列标题还在那里......？

不确定我错过了什么。他们在初始创建时正确设置。

$(elem).DataTable()

任何人都可以向我展示破坏/清空数据表的基本工作实现，然后用不同的数据重新初始化，所以我可以尝试模仿它。在过去的3天里，我的大脑很难看到他们的文档，没有任何进展。

我的数据对象示例

[
    {
        //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
    })  
}

在初始化表的常规函数中使用它，如果已经初始化则负责销毁和清空：

success

现在假设以下是您的AJAX调用的$('#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); })处理程序，或者您获得应该填充到表中的新数据：

String encodedImage = Base64.encodeToString(byte_arr, Base64.DEFAULT);

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

如何使用jQuery DataTables重新创建表

1 个答案: