Bug in rerender datatable

[Jesus-Rojas]

:beetle: bug report

rerender of the datatable is not working in version 17.0.1

:microscope: Minimal Reproduction

StackBlitz/GitHub Link: https://github.com/Jesus-Rojas/project-datables/commit/7f2a1a06de88cf3e7a56491745338fb23720665b

Step-by-step Instructions: Should be clicked in button rerender, it will update the list of categories.

:8ball: Expected behavior

Should show the list of categories inside of the datatable.

:camera: Screenshots

:globe_with_meridians: Your Environment

• NodeJS version: 20.12.2
• Angular version: 17.3.8
• Angular CLI version: 17.3.8
• jQuery version: 3.6.0
• DataTables version: 2.0.3
• angular-datatables version: 17.1.0

:memo: Additional context

[RenatoMorenoR]

+1 I have the same Issue with Angular 17

[stormbreakR1]

I am also facing this issue in Datatables v2. Anyone found any solution?

[mjtemdark]

Hello I'm playing with this issue and the problem is related to how destroy works in datatables 2.0 "destroy" API converts DOM in plain HTML with no references, so the piece of reactive DOM you put as angular directive doesn't longer exists , this mean changes doesn't triggered. Also when you pass "true" on destroy completely removes DOM causes the same issue, I think this does not have "easy" solution, you have to save old DOM reference of the table and re-insert that in angular template then recreate table, this need advanced manipulations of DOM, so the alternative way of solving that is using the internal configuration of DataTables using "ajax" option for data, you can subscribe manually the subject and pass the new options with data with dtTrigger, or subscribe inside ajax function and use "reload" api for DataTables.

[RahulkExl]

@mjtemdark Have you tried the solution that you have mentioned. I am curious to know if it woks or not.

[mjtemdark]

I'm workarround in a solution and if you work with ajax function for reload data you don't really have to destroy the table, and here it's working example https://stackblitz.com/edit/stackblitz-starters-wemgr4, I'm also trying to find a solution for angular templates.

[mehulk05]

Facing same issue. I have huge application with 100 plus modules. So ajax solution is not feasible for me

[mjtemdark]

I found a temporary not fashioned solution for this, and update info for the bug. Presumably DT-2 "FREEZES" rows, prevent "tr" to be added without use internal rows API, I don't know how disable that, the bug persists when you destroy table. So I created a ng-template and insert manually using viewRefs and tbody id, https://stackblitz.com/edit/stackblitz-starters-ucgbjw. Check the rows update changing to UPPERCASE so It's not change detector related issue.

[shanmukhateja]

Hello,

It looks like DataTables v2 has changed how it renders the table and as such broken your setup (which worked with v1.x).

Your approach of using @for is not supported by us as it is very similar to *ngFor approach. This has been addressed in our Deprecated section. Also, I highly recommend using TemplateRef and Pipe API instead.

I will keep the issue open for now but the bot will close it when this goes inactive.

[alpozgur]

Still rerender not working in18.0.0

• NodeJS version: 22.4.0
• Angular version: 18.1.3
• Angular CLI version: 18.1.3
• jQuery version: 3.7.0
• DataTables version: 2.1.3
• angular-datatables version: 18.0.0

works fine at first initialize. When i call rerender table goes away.... destroy : true,

when code enters to rerender function, at dtInstance.destroy(), table destroying... but in this.dtTrigger.next(this.dtOptions) is not coming back

[khoirulhasin]

put dtOptions in ngOnInit and do not fill the dtTrigger with the value

<table  style="width:100%" datatable [dtOptions]="dtOptions" [dtTrigger]="dtTrigger"></table>

dtTrigger!: Subject<any> ;

 ngOnInit(): void {
    this.dtOptions = {
      paging: true,
      ordering: false
    };
  }