backbone.js 如何从HTML源刷新/重新加载DataTable

7xzttuei  于 2022-11-10  发布在  其他
关注(0)|答案(2)|浏览(158)

我正在使用BackboneJS用多个数据源填充我的表。您不需要了解Backbone来帮助解决这个问题,因为这个问题主要是一个DataTables问题。
我在第一次呈现集合视图时初始化了我的数据表。
我的问题是,我不知道如何告诉DataTable如何在每个 AJAX 请求后从DOM重新加载它的数据
另一个例子是为每一行加载一些数据,然后相应地更新它(由 Backbone.js 视图完成)。
更改表的示例:

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

如有任何帮助,我们将不胜感激。

jhiyze9q

jhiyze9q1#

使用rows().invalidate()使DataTable中保存的选定行的数据无效。
例如,要使使用原始数据源的所有行无效,请执行以下操作:

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

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

请注意,draw()会将表格重设为第一页。若要保留该页,请改用draw(false)

46qrfjad

46qrfjad2#

我一直在寻找类似的答案。在我的项目中,表的内容被清除,重写为vanilla 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();
}

相关问题