我如何 refresh/reload 来自 HTML 源的数据表
How do I refresh/reload my DataTable from HTML source
我正在使用 BackboneJS 用 多个数据源 填充我的 table。您不需要知道 Backbone 来帮助解决这个问题,因为这个问题主要是 DataTables 问题。
我在第一次呈现集合视图时初始化我的数据table。
我的问题是我不知道如何告诉 DataTables 如何在每个 ajax 请求 后从 DOM 重新加载它的数据。知道如何做到这一点吗?
另一个例子是为每一行加载一些数据然后相应地更新它(由 Backbone View 完成)。但是 我需要让 Datatable 知道 DOM table 已经改变 .
示例将 table 更改为:
<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>
如有任何帮助,我们将不胜感激。
使用 rows().invalidate()
使所选行的 DataTables 中保存的数据无效。
例如,要使用原始数据源使所有行无效:
var table = $('#example').DataTable();
table
.rows()
.invalidate()
.draw();
请注意draw()
会将table重置为第一页。要保留页面,请改用 draw(false)
。
我正在寻找类似问题的答案。在我的项目中,table 的内容被清除并重写为 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();
}
我正在使用 BackboneJS 用 多个数据源 填充我的 table。您不需要知道 Backbone 来帮助解决这个问题,因为这个问题主要是 DataTables 问题。
我在第一次呈现集合视图时初始化我的数据table。
我的问题是我不知道如何告诉 DataTables 如何在每个 ajax 请求 后从 DOM 重新加载它的数据。知道如何做到这一点吗?
另一个例子是为每一行加载一些数据然后相应地更新它(由 Backbone View 完成)。但是 我需要让 Datatable 知道 DOM table 已经改变 .
示例将 table 更改为:
<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>
如有任何帮助,我们将不胜感激。
使用 rows().invalidate()
使所选行的 DataTables 中保存的数据无效。
例如,要使用原始数据源使所有行无效:
var table = $('#example').DataTable();
table
.rows()
.invalidate()
.draw();
请注意draw()
会将table重置为第一页。要保留页面,请改用 draw(false)
。
我正在寻找类似问题的答案。在我的项目中,table 的内容被清除并重写为 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();
}