Question

3

Implementing Vue.js + DataTables properly

rated 0 times [ 10] [ 7] / answers: 1 / hits: 16327 / 9 Years ago, thu, september 24, 2015, 12:00:00

Im trying to implement Vue.js + jQuery's DataTables but there's a weird things happening.

Check this fiddle ~~on firefox (not working on chrome)~~:
http://jsfiddle.net/chrislandeza/xgv8c01y/

when I change the state of DataTable (e.g. sort, search, etc.):

Newly added data on the list disappears

The DOM is not reading the directives or the vue properties

I'm pretty sure anyone who tried to mix vue.js+datatables experienced this problem. what did you do to solve this?

or is there a pure Vue.js script/plugin that has the same (or close) functionality like jquery's DataTable? (pagination, searching, sorting, number of entries to show, etc.).

here's the code from the fiddle above:

HTML:

<div class='container-fluid' id=app>

        <div class='row'>

            <div class='col-md-9'>

                <table class=table table-bordered id=app-datatable>

                    <thead>

                        <tr>

                            <th>Name</th>

                            <th>Age</th>

                            <th></th>

                        </tr>

                    </thead>

                    <tbody>

                        <tr v-repeat=user: users>

                            <td>{{ user.name }}</td>

                            <td>{{ user.age }}</td>

                            <td>

                                <button type=button v-on=click: foo(user)>Action</button>

                            </td>

                        </tr>

                    </tbody>

                </table>

            </div>

            <div class='col-md-3'>

                <div class=form-group>

                    <label>Name</label>

                    <input type=text

                           class=form-control

                           v-model=newUser.name

                           >

                </div>



                <div class=form-group>

                    <label>Age</label>

                    <input type=name

                           class=form-control

                           v-model=newUser.age

                           >

                </div>

                <button type=submit class=btn btn-primary v-on=click: addUser()>Add</button>

            </div>

        </div>

    </div>

JavaScript:

$(document).ready(function () {

    var dT = $('#app-datatable').DataTable();

});



var vm = new Vue({

    el: '#app',

    data: {

        newUser: {},

        users: [

            {name: 'Chris', age: 1},

            {name: 'John', age: 2}

        ]

    },

    methods:{

        addUser: function(){

           this.users.push(this.newUser);

           this.newUser = {};

        },

        foo: function(user){

            console.log(user.name);

        }

    }

});

any suggestions are greatly appreciated.

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

tobyl

Add To Favorites

Follow

Total Points: 598

Total Questions: 110

Total Answers: 114

Location: Vietnam

Member since Sat, Feb 12, 2022

2 Years ago

tobyl questions

1 How to update State of chart.js in React

Tue, Aug 10, 21, 00:00, 3 Years ago

1 Angular Jasmine this service method is a not a function

Wed, Jan 13, 21, 00:00, 3 Years ago

1 Double sided input slider in React

Tue, Dec 1, 20, 00:00, 4 Years ago

1 Formatting Strings to Datetime using specific formats in Luxon

Mon, Nov 2, 20, 00:00, 4 Years ago

1 Cannot find module 'react-native-reanimated/plugin' from /projectFolder

Thu, Sep 3, 20, 00:00, 4 Years ago

View All

answered 9 Years ago tiasavannahw · Accepted Answer

To get the DataTables plugin integrated correctly with Vue, there are a few things to keep in mind:

Per your example, you can use var dT = $('#app-datatable').DataTable(); to initialize the DataTables if you already have the data ready and rendered to the DOM. If you don't have the DOM <table></table> fully rendered (perhaps due to data populated via a delayed ajax call), you can't initialize the DataTables until the data is ready. As an example, if you have a fetchData method in your component, you can initialize the DataTable once the promise has been fulfilled.

To update the table once initialized, perhaps due to a change in the underlying table data, the best (perhaps the only way), is to first destroy the table, before the new data is received and written to the DOM by Vue:
```
var dT = $('#app-datatable').DataTable();

dT.destroy();
```
Then, once the data (in your case, the users array) has been updated,
re-initialize the DataTable as so:
```
this.$nextTick(function() {

   $('#app-datatable').DataTable({

      // DataTable options here...

   });

})
```
The $nextTick is necessary to ensure Vue has flushed the new data to the DOM, before re-initializing. If the DOM is updated after the DataTable plugin has been initialized, you'll see the table data, but the usual sorting, paging, etc. won't work.

Another important point, is to have a row id in your dataset, and set the key in the <tr></tr>:

<tr v-repeat=user: users track-by=id>

Without the track-by, Vue will complain when flushing new data to the DOM after DataTables has been initializing, likely due to not finding DOM elements hi-jacked by DataTables.