Quantcast
Channel: DataTables 1.10 — DataTables forums
Viewing all articles
Browse latest Browse all 2364

Datatable not update dataset after trigger

$
0
0

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?


Viewing all articles
Browse latest Browse all 2364

Trending Articles