如何从HTML源代码刷新/重新加载我的DataTable？

Question

我正在使用BackboneJS来填充我的表格，其中包含多个数据源。您不需要了解BackboneJS就可以回答这个问题，因为这个问题主要与DataTables有关。

当集合视图第一次呈现时，我初始化Datatable。

我的问题是，我不知道如何告诉DataTables在每个ajax请求后如何从DOM重新加载其数据。有什么建议吗？

另一个例子是为每一行加载一些数据，然后根据需要进行更新（由Backbone View完成）。但是，我需要让DataTables知道DOM表已更改。

例如将表从以下内容更改：

<table>
  <thead>...</thead>
  <tbody>
    <tr>
        <td>Some Data</td>
        <td>Some Data2</td>
        <td>Loading...</td>
    </tr>
    ...
  </tbody>
</table>

To:

<table>
  <thead>...</thead>
  <tbody>
    <tr>
        <td>Some Data</td>
        <td>Some Data2</td>
        <td data-order="5" data-search="5"><span class="some_classes">5</span></td>
   </tr>
      ...
  </tbody>
</table>

任何帮助都将不胜感激。

- Werner Raath

---

Backbone 的重要部分是将数据存储在模型和集合中，并让视图监听这些对象上的事件，以便在需要时重新呈现自身。我认为您需要在问题中包含您的 Backbone 代码。 - Tholle

好的，我可以添加它，但问题是：我可以看到DOM在不使用DataTables的情况下完美加载。我的整个表格都呈现出所有数据，我只使用Datatables因为有太多数据需要显示，所以我使用Datatables的功能进行排序、搜索等。我的Backbone组件工作得非常好，但是Datatables不能像Backbone那样捕捉到DOM的变化，所以我必须通知它从DOM刷新。 - Werner Raath

也许这可以帮到您：https://dev59.com/oGcs5IYBdhLWcg3wVyil - 76484

Answer 1

使用 rows().invalidate() 方法，可以使 DataTables 中所选行的数据失效。

例如，要使所有使用原始数据源的行失效：

var table = $('#example').DataTable();

table
    .rows()
    .invalidate()
    .draw();

请注意，draw()会重置表格到第一页。为了保留页面，请使用draw(false)代替。

- Gyrocode.com

---

非常感谢，我可以看到 DataTable 成功从 DOM 中重新加载。 - Werner Raath

Answer 2

我正在寻找类似的答案。在我的项目中，表格的内容是通过原始JavaScript清除和重写的，后来才包含了DataTables库。以下是我如何使用DataTables的isDataTable()-function进行简化的版本，以帮助实现。

resultsTable最初是一个空的<table>标签，其内容在updateTable()函数中编写和更新。当Json数据通过异步请求可用时，将调用该函数。DataTables仅在稍后添加，如果从一开始就使用它，则可能会有所不同的实现方式。

希望这对其他人有所帮助。

table.js

export default class Table {
  constructor(tableId) {
    this.table = document.getElementById(tableId);
  }
  clearTable() {
    this.table.innerHTML = '';
  }
  writeTable(jsonData) {
    // json to html here
    const thead = ....;
    const tbody = ....;
    this.table.appendChild(thead);
    this.table.appendChild(tbody);
  } 
}

main.js

import Table from './modules/table.js';

// My class for writing json to html table
const table = new Table('resultsTable');

// Global variable for holding DataTable-API
let myDataTable

function updateTable(jsonData) {
  if ($.fn.DataTable.isDataTable(myDataTable)) {
    // Remove DataTable properties, if they are in use
    myDataTable.destroy();
    // Also empty the html table's content
    table.clearTable();
  }

  // (Re)Writes html thead and tbody to the table element
  table.writeTable(jsonData);

  // (Re)Set the table to use DataTables API
  myDataTable = $('#resultsTable').DataTable();
}

- Gemmu