Datatable not update dataset after trigger

albyG

Hello, i'm using Datatables 1.10, and my case is a large list of object, but i filter this list by a select.
My particular case is that i've different number of columns depending by selection, so i've to reinit the datatable to render rows correctly.

Basically the list is an array of objects like this one:

{
    "classid": number,
    "description": string,
    "icon": string,
    "layout": string,
    "mainclassid": number,
    "name": string,
    "plugin": string,
    "props": [
        ...
        {
            "classpropid": number,
            "name": string,
            "tag": string
        }
        ...
    ]
}

I've to display all props in <td> so i use *ngFor to do it in table header and body too.

I'm not using the original list i get from server because is very large and whenever user change the selected Class i populate an array within only filtered object corresponding to the selected Class.
My datatable is:

<<<< component.html >>>>

            <table class="display table-responsive-sm" *ngIf="selectedClass" datatable [dtOptions]="dtOptions"
                [dtTrigger]="dtTrigger">
                <thead>
                    <tr>
                        <th scope="col">{{'ASSET.NAME' | translate}}</th>
                        <th scope="col">Tag</th>
                        <th scope="col" *ngFor="let prop of selectedClass.props | keyvalue">{{'ASSET.PROPS' |
                            translate}} - {{prop.key}}</th>
                        <th scope="col">{{'ASSET.ICON' | translate}}</th>
                        <th scope="col" class="nosort">{{'COMMON.ACTIONS' | translate}}</th>
                    </tr>
                </thead>
                <tbody *ngIf="filteredList">
                    <tr *ngFor="let a of filteredList">
                        <td>{{a.name}}</td>
                        <td>{{a.description}}</td>
                        <td *ngFor="let prop of a.jconfig">{{prop.assetpropinfo.jvalue}}</td>
                        <td *ngIf="a.icon; else default"><i class="pg-icon">{{a.icon}}</i></td>
                        <ng-template #default>
                            <td><i>{{'ASSET.DEFAULT_ICON' | translate}}</i></td>
                        </ng-template>
                        <td>
                            <button type="button" (click)="openModal(template, a)" class="btn btn-sm btn-warning mx-1">
                                <i class="pg-icon">edit</i>
                            </button>

                            <button type="button" (click)="delete(a)" class="btn btn-sm btn-danger mx-1">
                                <i class="pg-icon">trash</i>
                            </button>
                        </td>
                    </tr>
                </tbody>
            </table>

<<<< component.ts >>>>

this.dtOptions = {
      pagingType: 'full_numbers',
      paging: false,
      autoWidth: true,
      columnDefs: [{
        targets: 'nosort',
        orderable: false
      }]
    };

Into the .ts file i've something like this:

  filteredList = [];
  private _selectedClass: Class = null;
  set selectedClass(value) {
    // this._selectedClass = null;
    console.log(value);
    this._selectedClass = value;
    this.updateTable();
    setTimeout(() => {
      console.log(this.dtElement, this.dtElement.dtInstance)
      if (this.dtElement && this.dtElement.dtInstance)
        this.dtElement.dtInstance.then((dtInstance: DataTables.Api) => {
          console.log("destroy and triggering from then >>>>>>>>>>>>>>>>>>>>>>>>")
          // Destroy the table first
          dtInstance.destroy();
          // Call the dtTrigger to rerender again
          this.dtTrigger.next();
        });
      else { this.dtTrigger.next(); console.log("triggering from else >>>>>>>>>>>>>>>>>>>>>>>>") }
    }, 100);
  }

The strange behaviour i get is that the dataset is not updating into the table EVEN the class selected and the filtered list are properly changed.
Any idea?

colin

We're happy to take a look, but as per the forum rules, please link to a test case - a test case that replicates the issue will ensure you'll get a quick and accurate response. Information on how to create a test case (if you aren't able to link to the page you are working on) is available here.

Cheers,

Colin