Question

我使用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>

非常感谢任何协助。

Answer 1

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

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

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

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

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

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();
}

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

2 个答案: