ajax.reload() and/or ajax.url().load() is just not working for Vue3 DataTable integration. It works if you include the CDN and follow the jQuery approach to it.
If you follow the instructions on the DataTables website on how to integrate DataTables into Vue3, that feature just doesn't seem to work.
https://datatables.net/blog/2022-06-22-vue
For example:
<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>
For a simple example, if you click the button, there would be a new Ajax request to somewhere else. This does not currently work.
The error that I get is:
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)
I've tried every combination, and it doesn't seem to work. For example:
$('#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();
Any ideas?
EDIT I did find that DataTables provides a dt() function, but it's still not working. It recommends the following:
DataTables API Update and delete are very similar in that we just manipulate the array of data, but we will need to access the DataTables API to know which rows have been selected by the end user. The DataTable component provides a dt() method that we can use to get this via a Vue reference:
let dt;
const table = ref(); // This variable is used in the `ref` attribute for the component
onMounted(function () {
dt = table.value.dt();
});
So the modified code looks like this, but still doesn't work.
<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';
import {onMounted, ref} from "vue";
DataTable.use(DataTablesLib);
export default {
name: "DataTableComponent",
components: {DataTable},
data(){
return {
columns: [
{"data": "id"},
{"data": "name"},
{"data": "email"},
{"data": "action", "sortable": false},
]
}
},
setup() {
let dt;
const table = ref();
onMounted(() => {
dt = table.value.dt();
});
return {
dt,
}
}
}
</script>
<style>
@import 'datatables.net-dt';
</style>
Code Sandbox: https://codesandbox.io/s/serverless-pond-4mu4zw?file=/src/App.vue
EDIT #2:
And I got it to work like this, if I use the <script setup> tag. Still can't get it to work in the export default.
https://codesandbox.io/s/festive-forest-1ojspm?file=/src/App.vue:514-719
EDIT #3 (SOLUTION):
Solved with the help of @Aleksandr Savkin. I had to use this.$refs in mounted() and not ref() as the docs suggested.
<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>
