2015-09-11 2 views
3

Хорошо, к сожалению, я столкнулся с этой проблемой. Поэтому сначала немного о спецификациях моего приложения. Я используюVue js и таблица таблиц данных не работают

  1. Vue.js
  2. Vue-resource.js
  3. JQuery
  4. JQuery DataTables

Теперь, потому что я захватывая данные через vue-ресурс, f или по какой-либо причине, когда вызов ajax окончательно завершен, и vue импортирует данные в таблицу, datatables решает не отображать разбиение на страницы и отображает все 200 результатов на одной странице. Есть ли все-таки, чтобы обновить datatables, поэтому он отображается с разбивкой по страницам после был импортирован в таблицу?

Мой Аякса вызов:

 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> 

EDIT Я обнаружил, что ни одна из функций не работает. Если я попытаюсь выбрать любую строку, таблица будет немедленно очищена. Моя модель (модель vue) все еще имеет все объекты внутри.

РЕШЕНИЕ:

Я просто установить время ожидания, чтобы начать таблицы данных после того, как я собираю данные через запрос AJAX. Это небольшое гетто, но, по крайней мере, оно работает. Если я найду лучшее исправление, исправьте это сообщение.

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

}); 
+1

Вместо 'setTimeout', вы пробовали [' nextTick'] (http://vuejs.org/api/#Vue-nextTick)? –

ответ

2

Задержка 0 сделал трюк для меня, хотя и не уверен, почему.

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

Я построил специальный компонент сетки vue: vue-tables. Вы можете проверить это.

Смежные вопросы