I am encountering an issue when trying to display a DataTable in a modal window. Initially, everything works as expected and I can see the screen perfectly. However, after closing the modal window and opening it again, the DataTable no longer shows the search box or pagination options.
Can someone assist me in resolving this problem?
Expected Result:
Actual Result:
Error:
my.component.ts
@ViewChild(DataTableDirective)
dtElement: DataTableDirective;
dtOptions: DataTables.Settings = {};
// We use this trigger because fetching the list of items can be time-consuming,
// so we ensure data is fetched before rendering
dtTrigger: Subject<any> = new Subject();
ngOnInit() {
this.service.getQueryResult(this.saveIteratorParams).subscribe( data => {
if (data.success !== false) {
this.queryViewResultL = data.payload;
this.tableDataList = data.payload.molResults;
if (this.tableDataList !== null || this.tableDataList !== undefined) {
this.theadData = Object.keys(this.tableDataList[0]);
// Calling the DT trigger to manually render the table
this.dtOptions = {
pagingType: 'full_numbers',
pageLength: 10
};
this.dtTrigger.next();
}
}
ngAfterViewInit(): void {
this.dtTrigger.next();
// console.log('ngAfterViewInit');
}
rerender(): void {
this.dtElement.dtInstance.then((dtInstance: DataTables.Api) => {
// Destroy the table first
dtInstance.destroy();
// Call the dtTrigger to rerender again
this.dtTrigger.next();
// if (this.dtTrigger.observers) { this.dtTrigger.next(); }
});
}
ngOnDestroy(): void {
// Do not forget to unsubscribe from the event
this.dtTrigger.unsubscribe();
console.log('this.dtTrigger.unsubscribe()', this.dtTrigger);
}