Vue3集成DataTables时ajax.reload()等刷新方法失效问题及解决

在Vue3项目中集成DataTables后，调用ajax.reload()或ajax.url().load()方法无法触发数据刷新，但通过CDN引入依赖并使用原生jQuery方式调用时功能正常。即使严格遵循DataTables官网的Vue3集成文档操作，该问题仍未解决。

初始问题代码 #

<template>
    <div class="p-6">
        <button @click="changeIt">
            Change
        </button>

        <DataTable
            class="display"
            id="datatable"
            :columns="columns"
            :ajax="{
                url: 'api/users',
            }"
            ref="table"
            :options="{
                select: true,
                serverSide: true,
            }"
        >
            <thead>
            <tr>
                <th>ID</th>
                <th>Name</th>
                <th>Email</th>
                <th>Action</th>
            </tr>
            </thead>
            <tbody>
            </tbody>
        </DataTable>
    </div>
</template>

<script>
import DataTable from 'datatables.net-vue3'
import DataTablesLib from 'datatables.net';

DataTable.use(DataTablesLib);

export default {
    name: 'DataTableComponent',
    components: {DataTable},
    data(){
        return {
            columns: [
                {"data": "id"},
                {"data": "name"},
                {"data": "email"},
                {"data": "action", "sortable": false},
            ],
        }
    },
    methods: {
        changeIt() {
            $('#datatable').DataTable().ajax.url('users/user').load();
        }
    },
}
</script>

<style>
@import 'datatables.net-dt';
</style>

错误信息 #

点击按钮触发新Ajax请求时无响应，控制台抛出如下错误：

runtime-core.esm-bundler.js:218 Uncaught TypeError: $(...).DataTable is not a function
    at Proxy.changeIt (DataTableComponent.vue:55:29)
    at _createElementVNode.onClick._cache.<computed>._cache.<computed> (DataTableComponent.vue:3:25)
    at callWithErrorHandling (runtime-core.esm-bundler.js:155:22)
    at callWithAsyncErrorHandling (runtime-core.esm-bundler.js:164:21)
    at HTMLButtonElement.invoker (runtime-dom.esm-bundler.js:369:13)

尝试过的无效调用方式 #

以下几种调用方式均无法解决问题：

• $('#datatable').DataTable().ajax.url('users/user').load();
• $('#datatable').DataTable.ajax.url('users/user').load();
• $('#datatable').ajax.url('users/user').load();
• DataTable().ajax.url('users/user').load();
• DataTable.ajax.url('users/user').load();

此外，按照文档尝试通过ref获取实例并调用dt()方法也无效；改用<script setup>标签写法时功能正常，但在export default写法下无法生效。

最终解决方案 #

在mounted钩子中通过this.$refs获取DataTables组件实例，再调用其dt()方法拿到DataTables的核心实例，之后即可正常调用ajax相关方法。修改后的完整代码如下：

<template>
    <div>
        <h1>Simple table</h1>
        <button @click="changeIt">Change It</button>

        <DataTable
            class="display"
            id="datatable"
            :columns="columns"
            ajax="api/users"
            ref="table"
            :options="{
                select: true,
                serverSide: true,
            }"
        >
            <thead>
            <tr>
                <th>ID</th>
                <th>Name</th>
                <th>Email</th>
                <th>Action</th>
            </tr>
            </thead>
            <tbody>
            </tbody>
        </DataTable>
    </div>
</template>

<script>
import DataTable from 'datatables.net-vue3';
import DataTablesLib from 'datatables.net';
import 'datatables.net-select';

DataTable.use(DataTablesLib);

export default {
    name: "DataTableComponent",
    components: {DataTable},
    data(){
        return {
            columns: [
                {"data": "id"},
                {"data": "name"},
                {"data": "email"},
                {"data": "action", "sortable": false},
            ],
            dt: null,
        }
    },
    mounted() {
        this.dt = this.$refs.table.dt();
    },
    methods: {
        changeIt() {
            this.dt.ajax.url('api/users/user').load();
        }
    }
}

</script>

<style>
@import 'datatables.net-dt';
</style>

内容的提问来源于stack exchange，提问作者Dino Cajic