如何重新加载制表符数据 table 中的数据？

Question

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

 $("#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

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

Answer 1

我猜你想用新数据填充你的 table 因为你需要清空当前 table 的数据你需要看到这个 link:

Tabulator Discussion

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

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

如果您想检查 table 是否为空或不使用此 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"]);

我想这会解决你的问题。

Answer 2

接受的答案有点矫枉过正，您可以调用 setData 和 setColumns 在创建 table 之后的任何时候起作用。没必要先销毁

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

Answer 3

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

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]

如何重新加载制表符数据 table 中的数据？

How to reload data in tabulator data table?

tabulator