Очистка данных таблицы Datatables и уничтожение таблицы без результата

Question

Очистка данных таблицы Datatables и уничтожение таблицы без результата

1

Я использую 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);
    }
}

vladja 11 сен. 2017, в 12:35

Источник

0

попробуйте изменить $.fn.dataTable.destroy на $.fn.DataTable.destroy - капитализировать DataTable
codtex 11 сен. 2017, в 11:42
0

Пробовал, но не помогло
vladja 11 сен. 2017, в 12:42
0

Да потому что такого метода нет, проверьте документацию . Если вы хотите уничтожить таблицу, вы можете вызвать this.table.destroy() если у вас есть доступ к this.table
codtex 11 сен. 2017, в 12:56
0

@codtex Кодекс вау, это помогло. Я пробовал это раньше, но не сработало, не знаю почему. Но есть новая проблема - после уничтожения таблицы новая не реинициализируется ... (обновленный вопрос по полной функции)
vladja 18 сен. 2017, в 07:38
0

Хм, я нашел, почему он не перезапускается, потому что уничтожение удаляет таблицу из DOM. Есть ли варианты просто очистить?
vladja 18 сен. 2017, в 08:11
1

Вы можете проверить примеры из документации, а также прочитать документацию для метода destroy . Также обратите внимание, что когда вы делаете this.table.destroy('#searchResultsTable') вы делаете this.table.destroy(true) . Этот метод допускает только логическое значение
codtex 18 сен. 2017, в 08:45
0

@codtex спасибо за вашу помощь. Это сработало, как я и ожидал. Не могли бы вы написать ответ вместо комментария, тогда я могу проверить его как ответ
vladja 18 сен. 2017, в 09:02
0

Добро пожаловать. Да я тоже выложу ответ :)
codtex 18 сен. 2017, в 09:05

Показать ещё 6 комментариев

Теги:

javascript

datatable

destroy

1 ответ

Ещё вопросы

попробуйте изменить $.fn.dataTable.destroy на $.fn.DataTable.destroy - капитализировать DataTable
Да потому что такого метода нет, проверьте документацию . Если вы хотите уничтожить таблицу, вы можете вызвать this.table.destroy() если у вас есть доступ к this.table
@codtex Кодекс вау, это помогло. Я пробовал это раньше, но не сработало, не знаю почему. Но есть новая проблема - после уничтожения таблицы новая не реинициализируется ... (обновленный вопрос по полной функции)
Хм, я нашел, почему он не перезапускается, потому что уничтожение удаляет таблицу из DOM. Есть ли варианты просто очистить?
Вы можете проверить примеры из документации, а также прочитать документацию для метода destroy . Также обратите внимание, что когда вы делаете this.table.destroy('#searchResultsTable') вы делаете this.table.destroy(true) . Этот метод допускает только логическое значение
@codtex спасибо за вашу помощь. Это сработало, как я и ожидал. Не могли бы вы написать ответ вместо комментария, тогда я могу проверить его как ответ
Добро пожаловать. Да я тоже выложу ответ :)

codtex · Accepted Answer · 2017-09-18T09-07-00.000Z

Если вы хотите очистить таблицу данных и снова провести ее повторно, вы можете сделать это с помощью метода 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>