Я использую DataTables с каркасом Aurelia. Таблица и сортировка работает хорошо, за исключением одного момента. Когда я извлекаю новую таблицу данных, ее следует очистить и перерисовать с новыми данными, но я всегда вижу строки с данными, которые были переданы до и сейчас.
Мой код 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" в качестве опции, но он восстанавливает первый источник данных, не очищает таблицу.
Также я попытался использовать это раньше, если условие:
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);
}
}
Если вы хотите очистить таблицу данных и снова провести ее повторно, вы можете сделать это с помощью метода destroy() и повторно инициализировать таблицу данных, которая также является тем подходом, который вы использовали.
$.fn.dataTable.destroy('#searchResultsTable'); // This will not work
Вышеприведенный код не работает, поскольку в соответствии с документацией такого метода нет.
Так что вы можете использовать destroy(), как this.table.destroy()
. Обратите внимание, что метод destroy()
принимает необязательный параметр Boolean, который по умолчанию имеет значение false
, что означает, что таблица будет восстановлена в исходное состояние (так что позже мы можем его повторно инициализировать). Если вы передаете true
таблица будет полностью удалена из 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>
$.fn.dataTable.destroy
на$.fn.DataTable.destroy
- капитализироватьDataTable