如何重新加载制表数据表中的数据？答案

【问题标题】：How to reload data in tabulator data table?如何重新加载制表数据表中的数据？
【发布时间】：2018-07-14 07:45:19
【问题描述】：

我正在尝试使用tabulator 加载动态数据我可以使用此代码生成表和数据：

 $("#example-table").tabulator({
        layout:"fitColumns",

        columns:[ //Define Table Columns
        {title:"Name", field:"name", width:150},
        {title:"Age", field:"age", align:"left", formatter:"progress"},
        {title:"Favourite Color", field:"col"},
        {title:"Date Of Birth", field:"dob", sorter:"date", align:"center"},
    ],
      });
      var tabledata = [
      {id:1, name:"Oli Bob", age:"12", col:"red", dob:""},
      {id:2, name:"Mary May", age:"1", col:"blue", dob:"14/05/1982"},
      {id:3, name:"Christine Lobowski", age:"42", col:"green", dob:"22/05/1982"},
      {id:4, name:"Brendon Philips", age:"125", col:"orange", dob:"01/08/1980"},
      {id:5, name:"Margret Marmajuke", age:"16", col:"yellow", dob:"31/01/1999"},
      ];

    //  $("#example-table").tabulator("setData", []);

      $("#example-table").tabulator("setData", tabledata);

但是当我尝试重新加载相同的数据 onclick 函数时，我收到了错误：

 Options Error - Tabulator does not allow options to be set after initialization unless there is a function defined for that purpose

所以我的问题是如何清空表的数据并重新加载新数据或相同数据

【问题讨论】：

标签： tabulator

【解决方案1】：

对此接受的答案有点矫枉过正，您可以调用 setData 和 setColumns 函数创建表后的任何内容。没有必要先销毁它

//update columns and data without destroying the table
$("#example-table").tabulator("setColumns", res["column"]);
$("#example-table").tabulator("setData", res["data"]);

【讨论】：

感谢您创建并维护这个很棒的库。特别感谢从版本 4 开始使用 pure/vanilla JS (ES6) 的努力，这使得它很容易与 React 和其他流行的 JS 框架集成。与旧版本相比，它有很大的改进，在使用 ag-Grid 社区版后，我将注意力转向 Tabulator。我计划将 Tabulator 用于我的应用程序中需要多级行分组的新模块，因为它可以在我的测试应用程序中正常工作。再次感谢作者。

【解决方案2】：

我猜你想用新数据填充你的表，你需要清空当前表的数据，你需要看到这个链接：

Tabulator Discussion

这里 olifolkerd 是说您可以重新初始化网格，方法是销毁它并使用以下方法重新创建它：

 $("#example-table").tabulator("destroy");
 $("#example-table").tabulator({...});

如果要检查表是否为空，请不要使用此 jquery 来检查制表符数据是否处于活动状态：

 var j = $( "#example-table" ).hasClass( "tabulator" )
     if (j) {
        $("#example-table").tabulator("destroy");

      }
//set new columns
      $("#example-table").tabulator("setColumns", res["column"]);

      //set new data
      $("#example-table").tabulator("setData", res["data"]);

我想这会解决你的问题。

【讨论】：

【解决方案3】：

为此目的定义了一个函数。您可以将 replaceData 方法与数据数组一起使用。或者您可以清除表数据并添加新数据集。

table.clearData();
table.updateOrAddData([{id:1, name:"bob"}, {id:3, name:"steve"}])
.then(function(rows){
    //rows - array of the row components for the rows updated or added
    //run code after data has been updated
})
.catch(function(error){
    //handle error updating data
});

//Replace Data
table.replaceData(tableData)
.then(function(){
    //run code after table has been successfuly updated
})
.catch(function(error){
    //handle error loading data
});

更多信息在这里。

[http://tabulator.info/docs/4.0/update][1]

【讨论】：