在 Svelte 中初始化数据表 Jquery

Question

我想在 svelte 中初始化一个 Jquery dataTable。我的第一个解决方案是：

我在 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)

有效。但是现在，我想在 table 中添加数据。所以我使用{#await} {:then data} {/await}

但是，我的table不是首发。如果我在我的 consol 中使用函数 initTable，我的 table 变成一个 datatable

对不起我的英语，如果你不明白告诉我，我会尽力纠正我的 post。

Answer 1

根据我使用其他 UI 框架的经验以及我必须在屏幕上初始化组件的地方 - 当我们在初始化之前添加 tick() 有时会有所帮助，如下所示：

   import {onMount, tick} from 'svelte';

   // ...

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

      initTable();
   }

它帮助我初始化了 materializecss 小部件（select 框、输入字段、吐司、工具提示等），但我还不明白，为什么它需要打勾以及是否有其他选择。它刚刚解决了我的问题:)

Answer 2

一旦您运行 $('#datatable').dataTable(...)，就会创建 DataTable 实例。此时它将接管 DOM 元素，并且不会从 DOM 重新读取数据（如果它稍后发生变化）（这可能是您对 {#await ...} 所做的）。

所以你在这里主要有两种方法。

要么您初始化您的 DataTable 实例 ($(el).dataTable(...)) 在 DOM 已用数据更新后（由 #await） .在这种情况下，您的 table 在加载数据时将保持无样式...

像这样：

    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's 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()
        })
    })

这 2 个例子可以在 this REPL.

现场看到

在 Svelte 中初始化数据表 Jquery

Init dataTable Jquery in Svelte

javascript

jquery

svelte

svelte-3