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>