How to change DOM after the datatable is rendered correctly?

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)

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

[dtaylor113]

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