javascript - Angular DataTables render table data two tables in a component

Question

I have 2 tables in a component I was trying to refresh the data while use click the reset button i was using table rerender (https://l-lin.github.io/angular-datatables/#/advanced/rerender) that was working fine for one table when I try to add for another table that won't work please anyone help me regard this thanks in advance

Component File

 <div class="row">
    <div class="col-md-6 table_content">
      <table   datatable  [dtOptions]="dtOptions" [dtTrigger]="triggerTwo" class="row-border hover"></table>
      <a href="javascript:void(0);" class="test-table btn btn-primary" (click)="resetTable(1);">rest table</a>
    </div>
    <div class="col-md-6 table_content">
      <!-- <h1>Right Tables</h1> -->
        <table datatable [dtOptions]="dtOptions"  [dtTrigger]="triggerOne" class="row-border hover"></table>
        <a href="javascript:void(0);" class="test-table btn btn-primary" (click)="resetTable(2);">rest table</a>
    </div>
  </div>

TS File

import { AfterViewInit, Component, OnDestroy, OnInit, ViewChildren,QueryList } from '@angular/core';
import { DataTableDirective } from 'angular-datatables';

import { Subject } from 'rxjs';

export interface cusInfo{
  id:number,
  name:string,
  age:number,
  payment:string,
  location:string,
};
@Component({
  selector: 'app-tables-data',
  templateUrl: './tables-data.component.html',
  styleUrls: ['./tables-data.component.css']
})
export class TablesDataComponent implements AfterViewInit, OnDestroy, OnInit{
  dtOptions: DataTables.Settings = {};
  @ViewChildren(DataTableDirective)
  table:QueryList<DataTableDirective>;
  triggerOne: Subject<any> = new Subject();
  triggerTwo: Subject<any> = new Subject();

  constructor() { }

  ngOnInit(): void {
    
    this.dtOptions = {
      pagingType: 'full_numbers',
      ajax: '../assets/data.json',
      columns: [
        {title: 'ID',data: 'id'}, 
        {title: 'First name',data: 'firstName'},
        {title: 'Last name',data: 'lastName'},
        {title: 'Age',data: 'age'},
      ]
    };
    
  }
  ngAfterViewInit(): void {
    this.triggerOne.next();
    this.triggerTwo.next();
  }
  ngOnDestroy(): void {
    this.triggerOne.unsubscribe();
    this.triggerTwo.unsubscribe();
   
    
  }
  resetTable(num:number): void {
   
    this.table.forEach((dtElement: DataTableDirective) => {
      if(dtElement.dtInstance)
        dtElement.dtInstance.then((dtInstance: DataTables.Api) => {
          dtInstance.destroy(); 
               
      });
      
    });
   
    
    if(num == 1){
    
       this.triggerTwo.next();        
    
    }
    if(num == 2){
          
     this.triggerOne.next(); 
    }
  
}


}

question from:https://stackoverflow.com/questions/65952751/angular-datatables-render-table-data-two-tables-in-a-component

Answer 1

Waitting for answers