Ok, so unfortunately I have e across this issue. So first a little about specs of my app. I am using

1. Vue.js
2. vue-resource.js
3. jQuery
4. jQuery DataTables

Now because I'm grabbing the data through vue-resource, for some reason when the ajax call is final finished and vue imports the data to the table, datatables decides not to render pagination, and displays all 200 results on one page. Is there anyway to refresh datatables so it is rendered with pagination after it has been imported into the table?

My ajax call:

       this.$http.get('getDispachedEmails', function(data){
          console.log(data['orders']);
          this.customers.push(data['orders']);
          var dt = $('#myTable').DataTable();
        });

My Table:

<table id="myTable" class="u-full-width">
  <thead>
    <tr>
      <th>Name</th>
      <th>Age</th>
      <th>Sex</th>
      <th>Location</th>
    </tr>
  </thead>
  <tbody>
    <tr v-repeat="customers[0]">
      <td>@{{ firstName }}  @{{ lastName }}</td>
      <td>@{{ email }}</td>
      <td>@{{ trackingNumber }}</td>
      <td>@{{ address }}</td>
    </tr>
  </tbody>
</table>

EDIT I have found out that none of the functions work. If i try to select any row, the table is instantly cleaned. My model (vue model) still has all the objects inside.

SOLUTION:

I just set a wait time to initiate data tables after I collect the data via ajax request. It's a little ghetto, but a least it works. If I find a better fix Ill edit this post.

this.$http.get('getDispachedEmails', function(data){
  console.log(data['orders']);
  this.customers.push(data['orders']);
  setTimeout(function(){$('#myTable').DataTable();}, 5000);

});

Ok, so unfortunately I have e across this issue. So first a little about specs of my app. I am using

1. Vue.js
2. vue-resource.js
3. jQuery
4. jQuery DataTables

Now because I'm grabbing the data through vue-resource, for some reason when the ajax call is final finished and vue imports the data to the table, datatables decides not to render pagination, and displays all 200 results on one page. Is there anyway to refresh datatables so it is rendered with pagination after it has been imported into the table?

My ajax call:

       this.$http.get('getDispachedEmails', function(data){
          console.log(data['orders']);
          this.customers.push(data['orders']);
          var dt = $('#myTable').DataTable();
        });

My Table:

<table id="myTable" class="u-full-width">
  <thead>
    <tr>
      <th>Name</th>
      <th>Age</th>
      <th>Sex</th>
      <th>Location</th>
    </tr>
  </thead>
  <tbody>
    <tr v-repeat="customers[0]">
      <td>@{{ firstName }}  @{{ lastName }}</td>
      <td>@{{ email }}</td>
      <td>@{{ trackingNumber }}</td>
      <td>@{{ address }}</td>
    </tr>
  </tbody>
</table>

EDIT I have found out that none of the functions work. If i try to select any row, the table is instantly cleaned. My model (vue model) still has all the objects inside.

SOLUTION:

I just set a wait time to initiate data tables after I collect the data via ajax request. It's a little ghetto, but a least it works. If I find a better fix Ill edit this post.

this.$http.get('getDispachedEmails', function(data){
  console.log(data['orders']);
  this.customers.push(data['orders']);
  setTimeout(function(){$('#myTable').DataTable();}, 5000);

});

• javascript
• datatables
• vue.js

• 1 Instead of setTimeout, have you tried nextTick? – Chad Retz Commented Dec 1, 2015 at 22:56

3 Answers 3

A delay of 0 did the trick for me, although not sure why.

setTimeout(function(){$('#myTable').DataTable();}, 0);

I've built a dedicated vue grid ponent: vue-tables . You might want to check it out.

Try this table which works with vue 2 and vue 3 both https://www.npmjs./package/data-table-vue