代码之家 › 专栏 › 技术社区 › Nilay Singh

如何在制表符数据表中重新加载数据?

tabulator

2

Nilay Singh · 技术社区 · 6 年前

我正在尝试使用 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

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

2 回复 | 直到 6 年前

1

user10083842user10083842 6 年前

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

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

我想这能解决你的问题。

2

Oli Folkerd 6 年前

这个公认的答案有点过分了,你可以打电话给 设置数据 和 设置列 在创建表后的任意位置执行函数。没必要先毁掉它

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