3

我正在尝试使用制表器加载动态数据，我可以使用以下代码生成表和数据：

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

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

4

3 回答 3

6

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

//update columns and data without destroying the table
$("#example-table").tabulator("setColumns", res["column"]);
$("#example-table").tabulator("setData", res["data"]);
于 2018-09-24T20:46:18.000 回答
2

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

制表讨论

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"]);

我认为这将解决您的问题。

于 2018-07-15T10:57:28.160 回答
0

为此目的定义了一个函数。您可以将 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
});

更多关于这个here。

[http://tabulator.info/docs/4.0/update][1]
于 2021-03-21T15:22:35.920 回答