Инициализировать dataTable JQuery в Svelte

Я хотел бы запустить JQuery dataTable в svelte. Мое первое решение было:

Я создаю на своей html-странице функцию сценария с JQuery dataTable

<script>
function initTable() {
    if( $('#datatable').length ) {
        $('#datatable').dataTable({
            sDom: "<'row'<'col-sm-6'l><'col-sm-6'f>r>t<'row'<'col-sm-6'i><'col-sm-6'p>>",
            "order": [[ 1, "desc" ],[0,"asc"]],
        });
    }
}</script>

И в моем компоненте:

onMount (initTable)

Это работает. Однако сейчас я хотел бы добавить данные в свою таблицу. Поэтому я использую {#await} {: then data} {/ await}

Но моя таблица не посвящена. Если я использую в своем консоле функцию initTable, моя таблица становится доступной для данных.

Извините за мой английский, если вы не понимаете, скажите мне, я постараюсь исправить свой пост.


javascript jquery svelte svelte-3
person RiseNet    schedule 01.07.2020    source источник
comment
Расскажите, пожалуйста, о том, что вы пытались сделать.   -  person Jérémie B    schedule 01.07.2020

Ответы (2)


arrow_upward
1
arrow_downward

После запуска $('#datatable').dataTable(...) создается экземпляр DataTable. На этом этапе он возьмет на себя элемент DOM и не будет перечитывать данные из DOM, если они позже изменятся (что, вероятно, именно то, что вы делаете со своим {#await ...}).

Итак, у вас здесь в основном 2 подхода.

Либо вы запускаете экземпляр DataTable ($(el).dataTable(...)) после, когда модель DOM была обновлена ​​данными (с помощью #await). В этом случае ваша таблица останется без стиля, пока данные загружаются ...

Что-то вроде этого:

    const dataPromise = load()
    
    onMount(() => {
        // NOTE waiting for the tick ensures the DOM will have been
        // updated by Svelte first
        dataPromise.then(tick).then(() => {
            table = jQuery(el).DataTable()
        })
    })

Или вы сразу же запускаете DataTable и используете DataTable JS API для загрузки данных. как только они станут доступны. Думаю, этот подход больше подходит для использования в Svelte. Тогда вы получите что-то вроде этого:

    let el // table element
    let table // table object (API)
    
    onMount(() => {
        // init the table immediately
        table = jQuery(el).DataTable()
        
        // load data & add them to the table with JS API
        load().then(rows => {
            table.rows.add(rows).draw()
        })
    })

Эти два примера можно увидеть в реальном времени в этом REPL.

person rixo    schedule 02.07.2020
comment
Спасибо за ответ ! Я использую beforeUpdate и afterUpdate для решения проблемы. beforeUpdate Я удаляю свой dataTable afterUpdate я запускаю свой dataTable, и он работает :) - person RiseNet; 02.07.2020

arrow_upward
1
arrow_downward

По моему опыту работы с другими фреймворками пользовательского интерфейса, и где мне нужно инициализировать компоненты на экране - иногда помогает, когда мы добавляем tick() перед инициализацией, например:

   import {onMount, tick} from 'svelte';

   // ...

   onMount(async () => {
      await tick():

      initTable();
   }

Это помогло мне инициализировать виджеты materializecss (поля выбора, поля ввода, тосты, всплывающие подсказки и т. Д.), Но я еще не понимал, зачем ему нужна галочка и есть ли альтернатива. Это просто решило мои проблемы :)

person Andreas Dolk    schedule 02.07.2020