Vue 3 + DataTables.net: Data table does not update on filtering

RobinVue

Hi,

I am having some trouble making DataTables work with Vue 3. Hopefully someone has similar experience, and know how to solve it. I got two components as can be seen in below code snippets.

When opening HomeView for the first time, the data table is populated with data, but when changing e.g. "Show 10 entries" to "Show 25 entries" the data table is left empty and data is never to be shown in the table again.

I am importing the following libraries in main.ts:

import 'bootstrap'
import 'bootstrap/dist/css/bootstrap.min.css'
import 'datatables.net-dt/js/dataTables.dataTables'
import 'datatables.net-dt/css/jquery.dataTables.min.css'
import 'jquery/dist/jquery.min.js';

HomeView.vue (View):

<template>
  <DataTable :dataSource="dataSource" />         
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import axios from 'axios'
import DataTable from '@/components/DataTable.vue'

const dataSource = ref([])

onMounted(async () => {
    const response = await axios.get("https://jsonplaceholder.typicode.com/users")
    dataSource.value = response.data
})
</script>

DataTable.vue (component):

<template>
    <div>
        <h1>Title</h1>

        <table class="table table-hover table-bordered" id="example">
            <thead>
                <tr>
                    <th>ID</th>
                    <th>Name</th>
                    <th>Email</th>
                </tr>
            </thead>
            <tbody>
                <tr v-for="entry in dataSource" :key="entry.id">
                    <td>{{entry.id}}</td>
                    <td>{{entry.name}}</td>
                    <td>{{entry.email}}</td>
                </tr>
            </tbody>
        </table>
    </div>
</template>

<script setup lang="ts">
import { onMounted, withDefaults } from 'vue'
import $ from 'jquery'; 

interface Props {
    dataSource: Array
}

withDefaults(defineProps<Props>(), {
    dataSource: Array
})

onMounted(() => {
    $('#example').DataTable()
})

</script>

Thanks! I also make sure to update this topic as I progress.

colin

It would be worth checking other threads in the forum, as there are a few discussing Vue3 such as this one here. Hopefully that one, or one of the others may give some clues. If not, please let us know,

Colin

RobinVue

Hi @colin. Thanks for the tip. Unfortunately I already read through all Vue 3 related discussions but could not find a thread that helped me solve my issue.

allan

You have both Vue and DataTables trying to control the same DOM - I'm afraid that is not going to work. For example the v-for will update the HTML if the data if changed, but DataTables knows nothing about that. Equally, when you change the page length, DataTables doesn't know anything about the rest of the data, since what it does know about was read from the DOM that Vue created.

You need to note use both libraries to control the same DOM. What I normally do is have the table with v-once on it, and then when initialising the DataTable, feed it the data to display using the data option. In this case you might use data: this.dataSource for example.

Allan

allan

Actually even better, put the v-once on a div around the table, so DataTables can insert its table control elements, without Vue potentially removing them.

Allan