Angular Datatables reload with dtTrigger

Issue

I'm using Angular Datatables in one of my projects. I display data, and on a button click I have to reload the data. I have the following setup:

In .html

<table datatable [dtOptions]="dtOptions" [dtTrigger]="dtTrigger" class="table table-hover table-responsive"
    style="width:100%">
    <thead>
        <tr>
            <th>Name</th>
            <th>Group</th>
            <th>Weight</th>
            <th>Control Valves</th>
            <th>Zones</th>
            <th>Decks</th>
            <th></th>
        </tr>
    </thead>
    <tbody *ngIf="roomsList?.length != 0">
        <ng-container *ngFor="let room of roomsList; let id = index">
            <tr *ngIf="room.visibility">

                <td>
                    <!- Some code -->
                </td>
                <td>
                    <!- Some code -->
                </td>
                <td>
                    <!- Some code -->
                </td>
                <td>
                    <!- Some code -->
                </td>
                <td>
                    <!- Some code -->
                </td>
                <td>
                    <!- Some code -->
                </td>
                <td>
                    <!- Some code -->
                </td>
            </tr>
        </ng-container>

    </tbody>
    <tbody *ngIf="roomsList?.length == 0">
        <tr>
            <td colspan="3" class="no-data-available">Loading...</td>
        </tr>
    </tbody>
</table>

in the .ts file I have:

dtOptions: DataTables.Settings = {};
dtTrigger: Subject<any> = new Subject<any>();

async ngOnInit() {
  
  this.dtOptions = {
    
    columnDefs:[
      {
        targets: 0,
        width: "20%"
      }
    ],
    ordering: false,
    paging: true,
    responsive:true,
    searching: false,
    
  };

  this.roomsList = //some api call to get data;
  this.dtTrigger.next();
}

async onSave(event){

  this.roomsList = //some api call to get data;
  this.dtTrigger.next();
  console.log(this.roomsList);
  console.log(request);
}

When I do it with this.dtTrigger.next();, I get the following error:

When I comment the this.dtTrigger.next(); I do not get the error, but I think what is happening, the old data is still there and the new data is rendered, and the pagination goes off and all 500+ rows appear in the table.

I've read that this dtTrigger.next() function, manually re renders the table, but in my case it gives me an error.

Can someone advice, what I might do wrong?

If additional information is needed, I can provide!

Regards,

Julian

Solution

I found a solution provided in an answer in github issue that I opened. The solution is in this link:

    this.dtElement.dtInstance.then((dtInstance: DataTables.Api) => {
      // Destroy the table first
      dtInstance.destroy();
      // Call the dtTrigger to rerender again
      this.dtTrigger.next();
    });

I have to take the table instance and destroy it before re render the table again.

Regards,

Julian

Answered By - Julian