Проблемы с Alpine JS и ванильными таблицами данных - PullRequest
Новая
       33

Проблемы с Alpine JS и ванильными таблицами данных

0 голосов
/ 20 марта 2020

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

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

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

JS Ребята, вы можете помочь?

1 Ответ

0 голосов
/ 30 апреля 2020

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

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

Следующий фрагмент инициализирует свойство экземпляра 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>
...