Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Vue js and Data Table Panigation not Working

Ok, so unfortunately I have come 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);

});
like image 718
Ashley Wrench Avatar asked Sep 11 '15 22:09

Ashley Wrench


2 Answers

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

setTimeout(function(){$('#myTable').DataTable();}, 0);
like image 72
Organic Advocate Avatar answered Nov 03 '22 07:11

Organic Advocate


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

like image 32
Matanya Avatar answered Nov 03 '22 08:11

Matanya