Rerender two angle-datatables

Question

У меня возникли проблемы с обновлением двух данных (с использованием угловых данных) на одной странице за одно и то же время.

Мой 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).

Но когда я помещаю два звонка rerender (независимо от порядка), есть некоторые неочевидные результаты. Я получаю сообщение 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(); 
}); 

Но все та же ошибка ...

- EDIT -

Я не мог воспроизвести эту ошибку в plunker ...

Тем не менее, кажется, что добавить третий скрытый стол решает эту ошибку ...

<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']] 
     }); 
}); 

Я действительно не знаю, как это может быть возможно, но добавить эти точные линии, ничего не меняя решает исключение ...

Однако, кроме того, DataTables не rerendered если DEFS колонки не изменяются. Я написал issue в github, и вот plunkr, иллюстрирующий это.

Так исключение «решено», но моя проблема все еще существует, потому что я не могу засавить мои DataTables без изменения заголовка ...

Answer 1

Просто оберните таблицу в DIV, и он будет работать

<div id="wrap_1"> 
<table id="datatable1" ng-if="Ctrl.dtOptions1" datatable="" dt-options="Ctrl.dtOptions1" dt-column-defs="Ctrl.dtColumnDefs1" class="row-border hover"></table> 
</div> 
<div id="wrap_2"> 
<table id="datatable2" ng-if="Ctrl.dtOptions2" datatable="" dt-options="Ctrl.dtOptions2" dt-column-defs="Ctrl.dtColumnDefs2" class="row-border hover"></table> 
</div>