Rerender two angular-datatables

Question

I'm having trouble updating two datatables (using angular-datatable) in the same page in the same time.

My HTML looks like this:

<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>

My js (simplified) looks like this:

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();}
    }
}

At the end of this code, when I put only one of the two rerenders, the corresponding table is well updated (no matter it is datatable1 or datatable2).

But when I put the two rerender calls (no matter the order), there is some unexpecting results. I obtain the message Error: Node was not found and the datatable2 disapears. The datatable1 is well updated. But then if I try again, datatable1 disapears as well (with the same error message).

The error stack trace is:

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

I first thought that the rerender destroys some refs or something... I tried to put a timeout between the two rerenders, but I obtain the same error. I also tried to retrieve again my instances 5 secs after the first rerender, and then call the second one, like this:

if(dtInstance1) {dtInstance1.rerender();}
DTInstances.getList().then(function(dtInstances) {
    dtInstance2 = dtInstances.datatable2;
    dtInstance2.rerender();
});

But still the same error...

-- EDIT --

I could not reproduce this error in a plunker...

However, it seems that add a third hidden table solves this error...

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

I really don't know how this could be possible, but add these exact lines without changing anything solves the exception...

However, besides, datatables are not rerendered if the column defs are not modified. I wrote an issue in github and here is the plunkr illustrating it.

So the exception is "solved" but my problem still exists because I can't rerender my datatables without changing the header...

Answer 1

Just wrap your table into a div, and it will work

<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>