Проблемы с AlpineJS и Vanilla DataTables

Question

У меня есть этот макет, я использую DataTables для работы с моими данными (разбиение на страницы, сортировка и поиск) - https://github.com/fiduswriter/Simple-DataTables

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

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

JS Ребята, поможете?

Answer 1

Этот ответ будет работать лучше, если вы используете Alpine.js v2+, поскольку я буду использовать x-init. До версии 1.7, эквивалентной этому, было бы делать все, что упомянуто вx-mounted.

Вы должны иметь возможность интегрировать сторонние библиотеки, которые принимают узел DOM (который new DataTable() конструктор поддерживает), используя x-init (для запуска инициализации / интеграции) и x-ref (чтобы Alpine предоставила вам DOM Node, для которого вы хотите инициализировать плагин).

Следующий фрагмент инициализирует dataTable свойство экземпляра, используя DataTable конструктор, вызываемый для элемента с помощью x-ref="dataTable" (с помощью $refs.dataTable).

<div
  x-data="{}"
  x-init="dataTable = new DataTable($refs.dataTable)"
>
  <table x-ref="dataTable"></table>
</div>

В принципе, вы также должны удалить экземпляр DataTable, когда компонент / приложение Alpine отключается. Вы можете сделать это, используя функцию для хука x-init и возвращая из нее обратный вызов "unmount"/"destroy" (примечание: это функция 2.x).

<div
  x-data="{}"
  x-init="() => {
    dataTable = new DataTable($refs.dataTable);
    return () => {
      dataTable.destroy();
    }
  }"
>
  <table x-ref="dataTable"></table>
</div>