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

Posted 2023-05-07

【中文标题】如何从 HTML 源刷新/重新加载我的 DataTable

【英文标题】：How do I refresh/reload my DataTable from HTML source

【发布时间】：2016-07-31 11:48:04

【问题描述】：

我正在使用 BackboneJS 用 多个数据源 填充我的表。您无需了解 Backbone 即可协助解决此问题，因为该问题主要是 DataTables 问题。

我在第一次呈现集合视图时初始化我的数据表。

我的问题是我不知道如何告诉 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>

收件人：

<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>

任何帮助将不胜感激。

【问题讨论】：

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

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

也许这会有所帮助：***.com/questions/12934144/…

【参考方案1】：

使用rows().invalidate() 使选定行的DataTables 中保存的数据无效。

例如，使用原始数据源使所有行无效：

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

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

请注意draw() 会将表格重置为第一页。要保留页面，请改用draw(false)。

【讨论】：

太好了，我可以看到 DataTable 正在成功地从 DOM 重新加载。

【参考方案2】：

我正在寻找类似问题的答案。在我的项目中，表格的内容被清除并重写为 vanilla javascript，并且 DataTables 库仅包含在项目的后期。这是我在 DataTables 的isDataTable()-function 的帮助下如何使用它的精简版。

resultsTable 开头是一个空的<table>-tag，内容在updateTable()-function 中写入和更新。当 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();