Question

我在Aurelia框架中使用 DataTables 。表和它的排序效果很好，不包括一个时刻。当我检索一个新的数据表时，应该清除并重新绘制新数据，但我总是看到包含数据的行，这些行之前和现在已经传递过。

我的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);
    }
}

Answer 1

如果要清除数据表并再次重新绘制它，可以使用destroy()方法执行此操作，并重新初始化数据表，这也是您采用的方法。

$.fn.dataTable.destroy('#searchResultsTable'); // This will not work

上面的代码不起作用，因为根据documentation，没有这样的方法。

所以您可以使用this.table.destroy()之类的destroy()。请注意，destroy()方法接受可选的布尔参数，默认情况下为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>

数据表表数据清除和表销毁没有给出结果

1 个答案: