Vue js and Data Table Panigation not Working

Question

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

Vue.js
vue-resource.js
jQuery
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);

});

Organic Advocate Organic Advocate · Accepted Answer · 2015-11-25T17:36:49

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

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

Vue js and Data Table Panigation not Working

2 Answers