Closed MELAS007 closed 2 years ago
`export class CompaniesComponent implements AfterViewInit, OnDestroy, OnInit { @ViewChild(DataTableDirective, { static: false }) dtElement: DataTableDirective; dtOptions: DataTables.Settings = {}; companies: any = []; data; dtTrigger: Subject = new Subject(); userData;
constructor( private apollo: Apollo, public dialog: MatDialog, private router: Router, private chRef: ChangeDetectorRef ) { this.userData = JSON.parse(localStorage.getItem('USER')); this.getData(); }
ngOnInit() { this.dtOptions = { pagingType: 'full_numbers', pageLength: 10, lengthMenu: [5, 10, 25, 50, 100], retrieve: true, destroy: true, }; } ngAfterViewInit() { this.dtTrigger.next(); } getData() { this.apollo .watchQuery({ query: gql { companies(where:{ creator: { id: "${this.userData.id}" } }) { id name address city country createdAt creator { email } } } , }) .valueChanges.subscribe((result: any) => { this.companies = result?.data && result?.data?.companies; this.rerender(); }); } view(d) { console.log(d); } openDialog() { const dialogRef = this.dialog.open(AddComponent, { height: '400px', width: '600px', });
{ companies(where:{ creator: { id: "${this.userData.id}" } }) { id name address city country createdAt creator { email } } }
dialogRef.afterClosed().subscribe((result) => { const data = result; if (data === 'ADDED!') { this.getData(); } });
} rerender() { if (!this.dtElement || !this.dtElement.dtInstance) { this.dtTrigger.next(); return; } this.dtElement.dtInstance.then((dtInstance: DataTables.Api) => { dtInstance.destroy(); this.dtTrigger.next(); }); // const table = $('#dtTable').DataTable(); // table.destroy(); } ngOnDestroy(): void { // Do not forget to unsubscribe the event this.dtTrigger.unsubscribe(); } }` I read from https://l-lin.github.io/angular-datatables/#/advanced/rerender
It doesn't refresh data at all!
Any suggestions?
Hi,
How did you solve this problem ? I also use same code
thanks
:globe_with_meridians: Your Environment
:memo: Additional context
MY CODE
`export class CompaniesComponent implements AfterViewInit, OnDestroy, OnInit { @ViewChild(DataTableDirective, { static: false }) dtElement: DataTableDirective; dtOptions: DataTables.Settings = {}; companies: any = []; data; dtTrigger: Subject = new Subject();
userData;
constructor( private apollo: Apollo, public dialog: MatDialog, private router: Router, private chRef: ChangeDetectorRef ) { this.userData = JSON.parse(localStorage.getItem('USER')); this.getData(); }
ngOnInit() { this.dtOptions = { pagingType: 'full_numbers', pageLength: 10, lengthMenu: [5, 10, 25, 50, 100], retrieve: true, destroy: true, }; } ngAfterViewInit() { this.dtTrigger.next(); } getData() { this.apollo .watchQuery({ query: gql
{ companies(where:{ creator: { id: "${this.userData.id}" } }) { id name address city country createdAt creator { email } } }
, }) .valueChanges.subscribe((result: any) => { this.companies = result?.data && result?.data?.companies; this.rerender(); }); } view(d) { console.log(d); } openDialog() { const dialogRef = this.dialog.open(AddComponent, { height: '400px', width: '600px', });} rerender() { if (!this.dtElement || !this.dtElement.dtInstance) { this.dtTrigger.next(); return; } this.dtElement.dtInstance.then((dtInstance: DataTables.Api) => { dtInstance.destroy(); this.dtTrigger.next(); }); // const table = $('#dtTable').DataTable(); // table.destroy(); } ngOnDestroy(): void { // Do not forget to unsubscribe the event this.dtTrigger.unsubscribe(); } }` I read from https://l-lin.github.io/angular-datatables/#/advanced/rerender
It doesn't refresh data at all!
Any suggestions?