How to change DOM after the datatable is rendered correctly?

[indianazhao]

I would like to change DOM after the datatable is rendered. For example, if the data length is less than some number, the pagination control will be hidden.

But when I change DOM by this:

    DTInstances.getLast().then(function(dtInstance) {
      console.log('DTInstances.getLast()...');
      vm.dtOptions.withDOM('<"dt-toolbar"<"col-xs-12 col-sm-6"f><"col-xs-12 col-sm-6 text-right"i>>t');
    });

the table will crash when I add/remove item to/from the table?

I have made a plnkr example based on the demo "Changing data with the Angular way": http://plnkr.co/edit/EfNUyEg00iMfhlARwYYV

Somehow I cannot see any error message in the plnkr example. But I can see error messages in my own project (I am not sure are these messages helpful):

TypeError: Cannot read property 'parentNode' of null
    at jquery.dataTables.js:8585
    at Object._Api.iterator (jquery.dataTables.js:6622)
    at Object.<anonymous> (jquery.dataTables.js:8584)
    at Object._Api.extend.methodScoping [as destroy] (jquery.dataTables.js:6785)
    at DataTable.fnDestroy (jquery.dataTables.js:5381)
    at HTMLTableElement.<anonymous> (jquery.dataTables.js:5887)
    at Function.x.extend.each (jquery-2.0.2.min.js:4)
    at x.fn.x.each (jquery-2.0.2.min.js:4)
    at DataTable (jquery.dataTables.js:5838)
    at $.fn.DataTable (jquery.dataTables.js:14206)

[l-lin]

Mmh. It's weird. I'll look into this.
For now, you can use the $timeout to "wait" until the table is fully rendered. See your modified plnkr.

[indianazhao]

l-lin, thanks for your reply.
When I click the add/remove button in your modified plnkr, I still see the blank html page.

[l-lin]

Indeed... Not sure why...

[zafra6]

Same case here, I think something happends when the collection is updated, is in that moment when the table disappears. But it only disappears after vm.dtOptions is modified.

[zafra6]

I think I found what the problem is, and I have a possible (temporary) solution.

When the dataTable options are modified (like vm.dtOptions, in the example) and after update the collection, angular takes that a action (the collection update) as if the collection actually would be updated twice (I don't know why), and the method '_destroyAndCompile' is called twice, because of the listener:

_parentScope.$watchCollection(_ngRepeatAttr, function(){...});

So, Inside of this listener the method ngDestroy() is called, in the first time a call to the sentence:

// Remove the DataTables generated nodes, events and classes
jqTable.detach();

is executed, and in the second time, the sentences

// When scrolling we had to break the table up - restore it
if (table !== thead.parentNode) {
    jqTable.children('thead').detach();
    jqTable.append(thead);
}
...
jqTable.detach(); <-- Again, is in this moment when the table disappears

In this plnkr you can realize that when the "Reload data" button is clicked (at the first time, before the "Change options" button) the table is destroyed only once, and after you clicked the "Change options" button and "Reload data" button the table is destroyed twice, and that's the problem (see the javascript console).

My solution:

Uncomment the condition
if(_newValue !== newValue) in the angular-datatables-v0.4.2 file

Hope it helps and I apologize for my bad english.

[giankotarola]

@zafra6
In which line is if(_newValue !== newValue)?
I have
if (newVal !== oldVal) {
ctrl.render($elem, ctrl.buildOptionsPromise(), _staticHTML);
}
in line 35.

[zafra6]

@giankotarola
The line I'm refer is in this plnkr, angular-datatables - v0.4.2: line 871 and line 873.

I added the var _newValue in the method create(options).

[giankotarola]

@zafra6
Sorry, I confuse the angular-datatables-bootstrap.js with angular-datatables.js files.
I made the changes and all it's ok until now.
Thanks you very much!

[falinsin]

Please help i need something like this i think.
I need change datatable language or translate but only in tools captions like search or pagination captions like next, prev etc but without rerender

I have a json for languages and if i rerender datatables translate ok but Is there a way of translate captions tools witout rerender any other method?

[vinodf]

In version 'angular-datatables - v0.5.2' solved the problem in line 904-916 staying that way:

function _destroyAndCompile() {
if (_newParentScope) {
_newParentScope.$destroy();
} else {
_oTable.ngDestroy();
}
//_oTable.ngDestroy();

// Re-compile because we lost the angular binding to the existing data
_$elem.html(_staticHTML);
_newParentScope = parentScope.$new();
$compile($elem.contents())(_newParentScope);
}

[allandaly]

vinodf fix works great for me to address this same issue -- I suggest this get rolled into master -- will do a fork/pull request on this soon

[dtaylor113]

+1 for this fix! I just spent a couple of days trying to debug why this was happening :-)