У меня возникли проблемы с обновлением двух таблиц данных (с использованием angular-datatable) на одной странице в одно и то же время.
Мой HTML выглядит так:
<table id="datatable1" ng-if="Ctrl.dtOptions1" datatable="" dt-options="Ctrl.dtOptions1" dt-column-defs="Ctrl.dtColumnDefs1" class="row-border hover"></table>
<table id="datatable2" ng-if="Ctrl.dtOptions2" datatable="" dt-options="Ctrl.dtOptions2" dt-column-defs="Ctrl.dtColumnDefs2" class="row-border hover"></table>
Мой js (упрощенный) выглядит так:
var self = this;
var dtInstance1;
var dtInstance2;
DTInstances.getList().then(function(dtInstances) {
dtInstance1 = dtInstances.datatable1;
dtInstance2 = dtInstances.datatable2;
});
self.searchButtonClick = function() {
myService.getData(myCriteria).then(function(rows) {
self.dtColumnDefs1 = [ ... ];
self.dtOptions1 = DTOptionsBuilder.newOptions()
.withOption('fnServerData', function (sSource, aoData, fnCallback) {
// Do some work with rows and aoData
fnCallBack(json);
});
self.dtColumnDefs2 = [ ... ];
self.dtOptions2 = ...;
if(dtInstance1) {dtInstance1.rerender();}
if(dtInstance2) {dtInstance2.rerender();}
}
}
В конце этого кода, когда я помещаю только один из двух повторных рендеров, соответствующая таблица хорошо обновляется (независимо от того, является ли это datatable1 или datatable2).
Но когда я помещаю два вызова повторной визуализации (независимо от порядка), есть некоторые неожиданные результаты. Я получаю сообщение Error: Node was not found
, и datatable2 исчезает. Datatable1 хорошо обновлен. Но затем, если я попытаюсь снова, datatable1 также исчезнет (с тем же сообщением об ошибке).
Трассировка стека ошибок:
Error: Node was not found
@http://localhost:3000/bower_components/datatables/media/js/jquery.dataTables.js:9034:4
_Api.prototype.iterator@http://localhost:3000/bower_components/datatables/media/js/jquery.dataTables.js:6827:11
@http://localhost:3000/bower_components/datatables/media/js/jquery.dataTables.js:8967:0
_Api.extend/methodScoping/<@http://localhost:3000/bower_components/datatables/media/js/jquery.dataTables.js:6990:15
rerender@http://localhost:3000/bower_components/angular-datatables/dist/angular-datatables.js:828:12
rerender@http://localhost:3000/bower_components/angular-datatables/dist/angular-datatables.js:492:8
self.search/</</<@http://localhost:3000/scripts/controllers/search.js:390:20
Сначала я подумал, что повторный рендеринг уничтожает какие-то ссылки или что-то в этом роде ... Я пытался установить тайм-аут между двумя повторными рендерами, но получаю ту же ошибку. Я также попытался снова получить свои экземпляры через 5 секунд после первого повторного рендеринга, а затем вызвать второй, например:
if(dtInstance1) {dtInstance1.rerender();}
DTInstances.getList().then(function(dtInstances) {
dtInstance2 = dtInstances.datatable2;
dtInstance2.rerender();
});
Но все та же ошибка ...
-- РЕДАКТИРОВАТЬ --
Я не смог воспроизвести эту ошибку в плункере ...
Однако кажется, что добавление третьей скрытой таблицы решает эту ошибку ...
<div ng-hide="true">
<table datatable="" dt-options="dtOptionsFake" dt-column-defs="dtColumnDefsFake"></table>
</div>
// FAKE TABLE
$scope.dtColumnDefsFake = [
DTColumnDefBuilder.newColumnDef(0).withTitle('fake')
];
$scope.dtOptionsFake = DTOptionsBuilder.newOptions()
.withDataProp('data')
.withOption('serverSide', true)
.withOption('processing', true)
.withPaginationType('full_numbers')
.withOption('fnServerData', function (sSource, aoData, fnCallback) {
fnCallback({
'draw': 1,
'recordsTotal': 1,
'recordsFiltered': 1,
'data': [['0']]
});
});
Я действительно не знаю, как это могло быть возможно, но добавление этих точных строк, ничего не меняя, решает исключение ...
Однако, кроме того, таблицы данных не отображаются повторно, если значения столбцов не изменены. Я написал проблему в github, и вот < href = "http://plnkr.co/edit/cUj0ShCFwiBwoySkPxsf?p=preview" rel = "nofollow"> plunkr, иллюстрирующий это.
Итак, исключение «решено», но моя проблема все еще существует, потому что я не могу повторно визуализировать свои таблицы данных без изменения заголовка ...