Хорошо, к сожалению, я столкнулся с этой проблемой. Поэтому сначала немного о спецификациях моего приложения. Я используюVue js и таблица таблиц данных не работают
- Vue.js
- Vue-resource.js
- JQuery
- 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);
});
Вместо 'setTimeout', вы пробовали [' nextTick'] (http://vuejs.org/api/#Vue-nextTick)? –