How to use datatables.js in Vue.js2 project?

Question

I want to create a reactive Datatable in my Laravel + Vue.js project. I'm using datatables.js library to show my data. When I make an API call to get the data from db API returns me an array, so I want to populate that array in the datatable. But it's working weird?

Here's API call:

methods: {
    getUsers() {
        axios.get('/api/users')
            .then(response => {
                if(response.status === 200) {
                    this.users = response.data.users;
                    console.log(this.users);
                }
            })
            .catch(error => {
                console.error(error);
            });
    }
},
mounted() {                
    $('#users-datatable-responsive').DataTable();
    this.getUsers();
}

This is how I populating the data in the datatable

<tr v-for="user in users">
    <td>@{{ user.fullname }}</td>
    <td>@{{ user.phone }}</td>
    <td>@{{ user.email }}</td>
</tr>

And here's the weird result:

Searching and other features of a datatable aren't working. What's the workaround?

Edited:

mounted() {               
    let table = $('#users-datatable-responsive').DataTable({
        language: this.dataTableOptions
    });
    this.getUsers();
    table.rows().invalidate().draw();
}

This approach didn't work for me.

That's because DataTables plugin does not automatically detect changes in DOM and updates its internal mapping of your data. You should force the instance to refresh, by invalidating the data and redrawing it, i.e. table.rows().invalidate().draw(); — Terry
– Terry, Commented Apr 2, 2018 at 11:01
Possible duplicate of How do I refresh/reload my DataTable from HTML source — Terry
– Terry, Commented Apr 2, 2018 at 11:01
Probably because you are refreshing the table before axios actually successfully fetches the data and updates Vue's data store, since axios' operations are asynchronous. — Terry
– Terry, Commented Apr 2, 2018 at 11:13

GaryMcM · Accepted Answer · 2018-04-06 00:42:25Z

1

I was unable to get Terry's answer to work, but after a little bit of playing around found that that destroying the table before render, then rebuilding the table on the next tick does work.

...
methods: {
        drawDT() {
          $("#dt").DataTable().draw();
        },
        async refreshData() {
          this.isLoading = true;
          $("#dt").DataTable().destroy();
          try {
            let data = await fetchData();
            this.users = data.slice(0, getRandomInt(1, data.length));
            await this.$nextTick(this.drawDT);
          } catch (err) {
            console.error(err);
          } finally {
            this.isLoading = false;
          }
        }
      },
...

Full example here

answered Apr 6, 2018 at 0:42

GaryMcM

4353 silver badges9 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Камилов Тимур Over a year ago

It gets me the same effect as Terry's (((

GaryMcM Over a year ago

Sorry to hear that. As you can see, my example is working, so hopefully it's of some help you. Otherwise can you post your code somewhere so others can hopefully spot the problem?

tony19 · Accepted Answer · 2022-07-15 00:59:02Z

0

If it is a simple table you could use this grid table component from vue docs https://v2.vuejs.org/v2/examples/grid-component.html

edited Jul 15, 2022 at 0:59

tony19

140k23 gold badges281 silver badges354 bronze badges

answered Apr 4, 2018 at 1:14

BenB

2,9473 gold badges33 silver badges57 bronze badges

Comments

tony19 · Accepted Answer · 2022-07-16 04:17:52Z

0

As per my comments, there are two issues that are causing the problem you are seeing:

DataTable plugin does not automatically updates its internal cache when you update the DOM. You will need to use its API to 'reset' the table, i.e. table.rows().invalidate().draw();
Axios works asynchronously, and you should reset the table only when the promise has been resolved. This should ideally be done using a custom method to keep things abstract :)

In your custom method, you must wait for VueJS to finish updating the DOM, since the DOM relies on iterating through this.users to render the correct markup. Use Vue.nextTick() to call the logic that 'resets' the table.

To fix this, you can call a custom method in your app/component that handles forced refreshing of the table, i.e.:

methods: {
    getUsers() {
        axios.get('/api/users')
            .then(response => {
                if(response.status === 200) {
                    // Populate VueJS data store with received data
                    this.users = response.data.users;

                    // Call a method that manually refreshes table
                    this.forceRefreshUserDataTable();
                }
            })
            .catch(error => {
                console.error(error);
            });
    }
},
mounted() {             
    this.usersDataTable = $('#users-datatable-responsive').DataTable();
    this.getUsers();
},
methods: {
    forceRefreshUserDataTable() {
        Vue.nextTick(function () {
            this.usersDataTable.rows().invalidate().draw();
        });
    }
}

edited Jul 16, 2022 at 4:17

tony19

140k23 gold badges281 silver badges354 bronze badges

answered Apr 2, 2018 at 11:17

Terry

66.7k16 gold badges107 silver badges127 bronze badges

4 Comments

Камилов Тимур Over a year ago

Error in nextTick: "TypeError: $(...).rows is not a function". This's the result.

Terry Over a year ago

@КамиловТимур Whoops, my bad. You can either choose to store the instantiated DataTable object (i.e. this.usersDataTable = ...), or chain .DataTable() to access the API, i.e. $('#users-datatable-responsive').DataTable().rows().invalidate().draw()

Камилов Тимур Over a year ago

Which type does usersDataTable has? Cz ur code doesn't still work ((

Камилов Тимур Over a year ago

after the nextTick() datatable is being truncated, right? And now, how to repopulate the users array to the datatable?

Collectives™ on Stack Overflow

How to use datatables.js in Vue.js2 project?

3 Answers 3

2 Comments

Comments

4 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

4 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related