Ajax Reload on Vue.js DataTables-CodePudding

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 >
        <button @click="changeIt">
            Change
        </button>

        <DataTable
            
            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?

CodePudding user response：

Maybe it'll help you!

You tried to get a table element using Jquery, but it's not Vue's way to get a component.

I noticed you use the Vue's ref attribute for the DataTable component, so use that to get the component, like this-

methods: {
  changeIt() {
    const componentTable = this.$refs.table;
    componentTable.ajax.url('users/user').load();
  }
},

Also, see this- Template refs documentation

CodePudding user response：

DataTables requires jQuery. Don't select either version if you already have it.

So, verify if you are-

Failing to contain the DataTables library.
Loading the DataTables library before the jQuery library.
Loading the jQuery library double.
Selecting the wrong route to the jQuery files.

For instance, in your HTML file at the head section, verify those-

   <!--  Load CSS file for DataTables  -->
    <link
      rel="stylesheet"
      href="https://cdnjs.cloudflare.com/ajax/libs/datatables/1.10.21/css/jquery.dataTables.min.css"
      integrity="sha512-1k7mWiTNoyx2XtmI96o hdjP8nn0f3Z2N4oF/9ZZRgijyV4omsKOXEnqL1gKQNPy2MTSP9rIEWGcH/CInulptA=="
      crossorigin="anonymous"
      referrerpolicy="no-referrer"
    />

    <!--  load jQuery  -->
    <script
      src="https://code.jquery.com/jquery-3.6.0.min.js"
      integrity="sha256-/xUj 3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4="
      crossorigin="anonymous"
    ></script>

    <!--  load DataTables  -->
    <script
      src="https://cdnjs.cloudflare.com/ajax/libs/datatables/1.10.21/js/jquery.dataTables.min.js"
      integrity="sha512-BkpSL20WETFylMrcirBahHfSnY  H2O1W UnEEO4yNIl jI2 zowyoGJpbtk6bx97fBXf  WJHSSK2MV4ghPcg=="
      crossorigin="anonymous"
      referrerpolicy="no-referrer"
    ></script>

For more information, refer this documentation- https://bobbyhadz.com/blog/jquery-datatable-is-not-a-function