Обратный вызов для .adjust и .recalc для таблиц данных

Я хочу пересчитать и настроить таблицу данных после изменения размеров таблицы с помощью события щелчка.

Корректировка и пересчет таблицы без обратного вызова работают, но содержимое как бы «переворачивается», поэтому сначала видны старые размеры, а после корректировки оно переключается на новое измерение. Чтобы предотвратить это, я хочу добавить наложение или скрыть таблицу в начале и показать ее снова, если настройка была выполнена. В этот момент я схожу с ума.

Вот мой код

//This works already
$(#mytableid).DataTable().columns.adjust().responsive.recalc(); 

//Now i want to add a callback and hide/show the tabele
$(#mytableid).addclass('hide');
//This code failed (also by useing .DataTable)
$(#mytableid).dataTable( {
   "drawCallback": function( settings ) {
     alert( 'now its time to show again' );
     $(#mytableid).removeclass('hide');
    }
} ).columns.adjust().responsive.recalc(); 

Я получил предупреждение DataTables об ошибке: id таблицы = mytableid - Невозможно повторно инициализировать DataTable.

Как я могу использовать обратный вызов для этого или может быть другой или более простой способ сделать это?

Большое спасибо!

Как конвертировать HTML в PDF с помощью jsPDF
Как конвертировать HTML в PDF с помощью jsPDF
В этой статье мы рассмотрим, как конвертировать HTML в PDF с помощью jsPDF. Здесь мы узнаем, как конвертировать HTML в PDF с помощью javascript.
0
0
879
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Согласно этому, вы не можете повторно инициализировать существующие datatable. Один из способов сделать это - destroy существующий, а затем снова инициализировать -

Рабочий пример -

var dataTable = $("#table").DataTable();
dataTable.columns.adjust().responsive.recalc();
$("#table").hide();
dataTable.destroy();
$("#table").DataTable( {
   "drawCallback": function( settings ) {
     alert( 'now its time to show again' );
     $("#table").show();
    }
} ).columns.adjust().responsive.recalc(); 
<script src = "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel = "stylesheet" type = "text/css" href = "https://cdn.datatables.net/v/dt/dt-1.10.23/r-2.2.6/datatables.min.css"/>
 
<script type = "text/javascript" src = "https://cdn.datatables.net/v/dt/dt-1.10.23/r-2.2.6/datatables.min.js"></script>
<table id = "table" class = "display">
    <thead>
        <tr>
            <th>Column 1</th>
            <th>Column 2</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Row 1 Data 1</td>
            <td>Row 1 Data 2</td>
        </tr>
        <tr>
            <td>Row 2 Data 1</td>
            <td>Row 2 Data 2</td>
        </tr>
    </tbody>
</table>

ок, другого выхода нет? Я думаю, что для повторной инициализации мне снова нужна вся информация из первой инициализации таблицы? В моем случае это непросто, эта информация взята с другой страницы... Кроме того, повторная инициализация приводит к ненужной вычислительной мощности?

relo80 24.12.2020 08:09

Вы можете сохранить все параметры во время первой инициализации, а затем повторно использовать их при следующей? Согласно datatables.net/manual/tech-notes/3 динамическое изменение параметров вообще невозможно. Я не уверен насчет последствий для производительности, но я думаю, что более эффективно уничтожать и повторно инициализировать, чем динамически изменять параметры. Вот почему они не предоставили эту функцию. Почему вам нужно повторно инициализировать datatable в первую очередь? Может есть обходной путь?

Nikhil Patil 24.12.2020 08:20

Другие вопросы по теме