如何用jQuery数据表创建一个表

How to recreate a table with jQuery DataTables

本文关键字：一个 何用 jQuery 数据表 创建      更新时间：2023-09-26

我实际上是在使用上面的答案(来自sdespont)来尝试销毁一些表。

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

FileuploadTable: 

FileName FileType FileSize AvailableActions

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

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

这是我遇到的问题。

我似乎不能设置 FileUploadTable在destroy()和empty()之后的列标题。当我尝试上传一个新文件时，元素仍然在页面上，只是空的，尽管同样的初始化被称为

我似乎不能摆脱的列标题在CSVTable后destroy()和empty()。当我尝试上传不同的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
]

OK。您可以使用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/

相关文章：