Vue js和数据表分页不起作用答案

【问题标题】：Vue js and Data Table Panigation not WorkingVue js和数据表分页不起作用
【发布时间】：2015-09-11 22:41:45
【问题描述】：

好的，很遗憾我遇到了这个问题。首先介绍一下我的应用程序的规格。我正在使用

Vue.js
vue-resource.js
jQuery
jQuery 数据表

现在因为我是通过 vue-resource 抓取数据，由于某种原因，当 ajax 调用最终完成并且 vue 将数据导入表时，datatables 决定不呈现分页，并且在一页上显示所有 200 个结果。无论如何要刷新 datatables 以便在将其导入表后以分页呈现？

我的 ajax 调用：

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

我的桌子：

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

~~编辑我发现这些功能都不起作用。如果我尝试选择任何行，表格会立即被清理。我的模型（vue 模型）里面仍然有所有的对象。~~

解决方案：

我只是在通过 ajax 请求收集数据后设置了一个等待时间来启动数据表。这是一个小贫民区，但至少它有效。如果我找到更好的解决方法，我会编辑这篇文章。

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

});

【问题讨论】：

你试过setTimeout而不是nextTick吗？

标签： javascript datatables vue.js

【解决方案1】：

0 的延迟对我有用，虽然不知道为什么。

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

【讨论】：

【解决方案2】：

我已经构建了一个专用的 vue 网格组件：vue-tables。您可能想检查一下。

【讨论】：