datatables table 数据清除和table 销毁不给结果
Datatables table data clearing and table destroying not giving a result
我在 Aurelia 框架中使用 DataTables。 Table 并且它的排序效果很好,不包括一个时刻。当我检索新数据时 table 应该被清除并用新数据重新绘制,但我总是看到包含之前和现在已经传递的数据的行。
我的ini代码:
if (this.results && this.results.length > 0) {
console.log('resultsChanged');
setTimeout(() => {
this.table = $('#searchResultsTable').DataTable({
retrieve: true,
searching: false,
paging: false,
info: false,
orderMulti: false,
order: [[2, "asc"]],
dateFormat: 'dd.mm.YYYY'
});
}, 200);
}
我尝试使用 'destroy: true' 作为选项,但它恢复了第一个数据源,并没有清除 table。
我之前也试过用这个 if condition:
if ($.fn.DataTable.isDataTable('#searchResultsTable')) {
console.log('table exists')
$.fn.dataTable.destroy('#searchResultsTable');
// $('#searchResultsTable').dataTable.fnDestroy();
}
但是$.fn.dataTable.destroy('#searchResultsTable');
总是报错$.fn.dataTable.destroy is not a function
。
正在寻找您的建议和帮助。
更新(完整功能):
resultsChanged(): void {
let timeout = 200;
if ($.fn.DataTable.isDataTable('#searchResultsTable')) {
console.log('table exists')
this.table.destroy('#searchResultsTable');
timeout = 0;
}
if (this.results && this.results.length > 0) {
console.log('resultsChanged');
setTimeout(() => {
this.table = $('#searchResultsTable').DataTable({
retrieve: true,
searching: false,
paging: false,
info: false,
orderMulti: false,
order: [[2, "asc"]],
dateFormat: 'dd.mm.YYYY'
});
}, timeout);
}
}
如果你想清除数据-table并重新绘制,你可以使用destroy()方法并重新初始化数据-table,这就是方法你也拿走了。
$.fn.dataTable.destroy('#searchResultsTable'); // This will not work
以上代码无效,因为根据 documentation 没有这样的方法。
所以您可以像 this.table.destroy()
一样使用 destroy()。请注意,destroy()
方法接受可选的布尔参数,默认情况下为 false
,这意味着 table 将恢复到其初始状态(,因此稍后我们可以重新初始化它)。如果您传递 true
,table 将从 DOM
中完全删除
示例代码片段:
$(document).ready(function() {
var table,
btnDestroy = $('#destroy'),
btnReInit = $('#init'),
btnRand = $('#random');
init();
btnDestroy.on('click', destroy);
btnReInit.on('click', init);
btnRand.on('click', randomData);
function destroy() {
try {
table.destroy();
btnDestroy.attr('disabled', true);
btnReInit.attr('disabled', false);
btnRand.attr('disabled', false);
} catch (e) {console.log(e.message);}
}
function init() {
table = $('#my-data-table').DataTable({
retrieve: true,
searching: false,
paging: false,
info: false,
orderMulti: false,
order: [
[0, "asc"]
]
});
btnDestroy.attr('disabled', false);
btnReInit.attr('disabled', true);
btnRand.attr('disabled', true);
}
function randomData() {
var tbody = $('#my-data-table tbody');
tbody.html('');
var rows = [];
var iterations = Math.floor(Math.random() * 5) + 3; // Random count rows
for (var i = 0; i < iterations; i++) {
rows.push('<tr><td>' + i + '</td><td>user ' + i + '</td><td>' + Math.floor(Math.random() * 10000) + 100 + '</td></tr>');
}
tbody.html(rows.join(''));
}
});
<link rel="stylesheet" href="//cdn.datatables.net/1.10.16/css/jquery.dataTables.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="//cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js"></script>
<p>You can randomize the data before Re-Initialize</p>
<button type="button" id="destroy">Destroy</button>
<button type="button" id="init" disabled>Re-Initialize</button>
<button type="button" id="random" disabled>Random Data</button>
<table id="my-data-table">
<thead>
<tr>
<th>ID</th>
<th>User</th>
<th>Value</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>user 1</td>
<td>34569</td>
</tr>
<tr>
<td>2</td>
<td>user 2</td>
<td>137</td>
</tr>
</tbody>
</table>
我在 Aurelia 框架中使用 DataTables。 Table 并且它的排序效果很好,不包括一个时刻。当我检索新数据时 table 应该被清除并用新数据重新绘制,但我总是看到包含之前和现在已经传递的数据的行。
我的ini代码:
if (this.results && this.results.length > 0) {
console.log('resultsChanged');
setTimeout(() => {
this.table = $('#searchResultsTable').DataTable({
retrieve: true,
searching: false,
paging: false,
info: false,
orderMulti: false,
order: [[2, "asc"]],
dateFormat: 'dd.mm.YYYY'
});
}, 200);
}
我尝试使用 'destroy: true' 作为选项,但它恢复了第一个数据源,并没有清除 table。
我之前也试过用这个 if condition:
if ($.fn.DataTable.isDataTable('#searchResultsTable')) {
console.log('table exists')
$.fn.dataTable.destroy('#searchResultsTable');
// $('#searchResultsTable').dataTable.fnDestroy();
}
但是$.fn.dataTable.destroy('#searchResultsTable');
总是报错$.fn.dataTable.destroy is not a function
。
正在寻找您的建议和帮助。
更新(完整功能):
resultsChanged(): void {
let timeout = 200;
if ($.fn.DataTable.isDataTable('#searchResultsTable')) {
console.log('table exists')
this.table.destroy('#searchResultsTable');
timeout = 0;
}
if (this.results && this.results.length > 0) {
console.log('resultsChanged');
setTimeout(() => {
this.table = $('#searchResultsTable').DataTable({
retrieve: true,
searching: false,
paging: false,
info: false,
orderMulti: false,
order: [[2, "asc"]],
dateFormat: 'dd.mm.YYYY'
});
}, timeout);
}
}
如果你想清除数据-table并重新绘制,你可以使用destroy()方法并重新初始化数据-table,这就是方法你也拿走了。
$.fn.dataTable.destroy('#searchResultsTable'); // This will not work
以上代码无效,因为根据 documentation 没有这样的方法。
所以您可以像 this.table.destroy()
一样使用 destroy()。请注意,destroy()
方法接受可选的布尔参数,默认情况下为 false
,这意味着 table 将恢复到其初始状态(,因此稍后我们可以重新初始化它)。如果您传递 true
,table 将从 DOM
示例代码片段:
$(document).ready(function() {
var table,
btnDestroy = $('#destroy'),
btnReInit = $('#init'),
btnRand = $('#random');
init();
btnDestroy.on('click', destroy);
btnReInit.on('click', init);
btnRand.on('click', randomData);
function destroy() {
try {
table.destroy();
btnDestroy.attr('disabled', true);
btnReInit.attr('disabled', false);
btnRand.attr('disabled', false);
} catch (e) {console.log(e.message);}
}
function init() {
table = $('#my-data-table').DataTable({
retrieve: true,
searching: false,
paging: false,
info: false,
orderMulti: false,
order: [
[0, "asc"]
]
});
btnDestroy.attr('disabled', false);
btnReInit.attr('disabled', true);
btnRand.attr('disabled', true);
}
function randomData() {
var tbody = $('#my-data-table tbody');
tbody.html('');
var rows = [];
var iterations = Math.floor(Math.random() * 5) + 3; // Random count rows
for (var i = 0; i < iterations; i++) {
rows.push('<tr><td>' + i + '</td><td>user ' + i + '</td><td>' + Math.floor(Math.random() * 10000) + 100 + '</td></tr>');
}
tbody.html(rows.join(''));
}
});
<link rel="stylesheet" href="//cdn.datatables.net/1.10.16/css/jquery.dataTables.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="//cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js"></script>
<p>You can randomize the data before Re-Initialize</p>
<button type="button" id="destroy">Destroy</button>
<button type="button" id="init" disabled>Re-Initialize</button>
<button type="button" id="random" disabled>Random Data</button>
<table id="my-data-table">
<thead>
<tr>
<th>ID</th>
<th>User</th>
<th>Value</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>user 1</td>
<td>34569</td>
</tr>
<tr>
<td>2</td>
<td>user 2</td>
<td>137</td>
</tr>
</tbody>
</table>