11

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.

Improve this question
2
  • 1
    the fiddle is not working because you are refering to githubusercontent directly - you should use rawgithub.com -> jsfiddle.net/cLd46juf see Reference GitHub file in jsFiddle Commented Sep 24, 2015 at 11:10
  • 2
    The issue is the same as when using dataTables the jQuery style in angular. Both are trying to manipulate the DOM, vue is winning the battle. Sad to say, I do not think there is an easy out of the box solution. Commented Sep 24, 2015 at 11:14

3 Answers 3

Reset to default
34

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

  1. 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.

  2. 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.

  3. 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.

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

Comments

0

maybe you can use lifecycle hooks, infact these weird things are caused by competition of manipulating the DOM. in your vue instance, add a created() hook then initialize the DataTable, just like the following:

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); } }, created(){ this.$nextTick(function() { $('#app-datatable').DataTable(); }) }

});

Improve this answer

Comments

0

I have externally supplied table data (not an Ajax call from DataTable) and destroying / re-creating the table using only these lifecycle hooks is working for me:

beforeUpdate: function() { if (this.dataTable) { this.dataTable.destroy() } }, updated: function() { this.dataTable = $(this.$el).DataTable() }

From https://alligator.io/vuejs/component-lifecycle/

"The beforeUpdate hook runs after data changes on your component and the update cycle begins, right before the DOM is patched and re-rendered. It allows you to get the new state of any reactive data on your component before it actually gets rendered."

"The updated hook runs after data changes on your component and the DOM re-renders. If you need to access the DOM after a property change, here is probably the safest place to do it."

Improve this answer

Comments

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.