Повторно отрендерить две угловые данные

У меня возникли проблемы с обновлением двух таблиц данных (с использованием 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, иллюстрирующий это.

Итак, исключение «решено», но моя проблема все еще существует, потому что я не могу повторно визуализировать свои таблицы данных без изменения заголовка ...


person pidupuis    schedule 27.03.2015    source источник
comment
ты умеешь делать скрипку?   -  person dmullings    schedule 27.03.2015
comment
@dmullings Я работаю над этим, но странно, что я не могу воспроизвести это в моем plunkr ...   -  person pidupuis    schedule 30.03.2015
comment
Я отредактировал свой пост, чтобы предоставить вам новую информацию   -  person pidupuis    schedule 30.03.2015


Ответы (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>
person Lareb Nawab    schedule 04.05.2015