如何在最新版本的 Tabulator 中重新初始化数据表答案

【问题标题】：how to reinitialise a datatable in the newest version of Tabulator如何在最新版本的 Tabulator 中重新初始化数据表
【发布时间】：2019-04-11 06:00:11
【问题描述】：

我想重新初始化一个数据表，因为表中的数据已经更新。我注意到$('#...').tabulator("destroy") 可能是一个解决方案。不过最新版的Tabulator好像没有制表功能。

请问如何实现与旧版tabulator("destroy")相同的功能？

【问题讨论】：

如果此解决方案有效，请接受答案，否则如果您仍有问题，请告诉我:)

标签： tabulator

【解决方案1】：

不要使用 Destroy 它会破坏整个 Tabulator，使用 clearData Update 和 Add 按照documentation。

检查我下面的代码

<!DOCTYPE html>
<html lang="en">
<head><link href="https://unpkg.com/tabulator-tables@4.2.4/dist/css/tabulator.min.css" rel="stylesheet"></head>
<body>
<div id="example-table"></div>

<button onclick="removeData()">Clear Data</button>
<button onclick="update()">Update Data</button>


<script
  src="https://code.jquery.com/jquery-3.4.0.min.js"
  integrity="sha256-BJeo0qm959uMBGb65z40ejJYGSgR7REI4+CW1fNKwOg="
  crossorigin="anonymous"></script>
<script type="text/javascript" src="https://unpkg.com/tabulator-tables@4.2.4/dist/js/tabulator.min.js"></script>
<script>


  const tabledata1 = [
    {id: 1, name: "Oli ", money: "0", col: "red", dob: ""},
    {id: 2, name: "Mary ", money: "0", col: "blue", dob: "14/05/1982"},
    {id: 3, name: "Christine ", money: "0", col: "green", dob: "22/05/1982"},
    {id: 4, name: "Brendon ", money: "0", col: "orange", dob: "01/08/1980"},
    {id: 5, name: "Margret ", money: "0", col: "yellow", dob: "31/01/1999"},
  ];

  const tabledata2 = [
    {id: 1, name: " Bob", money: "12", col: "red", dob: ""},
    {id: 2, name: " May", money: "1", col: "blue", dob: "14/05/1982"},
    {id: 3, name: " Lobowski", money: "42", col: "green", dob: "22/05/1982"},
    {id: 4, name: "Brendon ", money: "0", col: "orange", dob: "01/08/1980"},
    {id: 5, name: " Marmajuke", money: "16", col: "yellow", dob: "31/01/1999"},
  ];

  const table = new Tabulator("#example-table", {
    height: 205, // set height of table (in CSS or here), this enables the Virtual DOM and improves render speed dramatically (can be any valid css height value)
    data: tabledata1, //assign data to table
    layout: "fitColumns", //fit columns to width of table (optional)
    columns: [ //Define Table Columns
      {title: "Name", field: "name", width: 150},
      {
        title: "money",
        field: "money",
        align: "left",
        formatter: "money"
      },
      {title: "Favourite Color", field: "col"},
      {title: "Date Of Birth", field: "dob", sorter: "date", align: "center"},
    ]
  });

  function removeData() {
    table.clearData();
  }

  function update() {
    table.updateOrAddData(tabledata2);
    // table.addData(tabledata2);
  }


</script>
</body>
</html>

【讨论】：