Having trouble updating Angular Datatable after selecting different data? The API response is coming in but the table data is not being updated. Can anyone suggest how to properly destroy and reinitialize the table for the next click? Below is a snippet of the code I have written:
//html table
<table
datatable
[dtOptions]="dtOptions"
[dtTrigger]="dtTrigger"
class="row-border hover">
</table>
//datatable properties
this.dtOptions = {
data: jsonData,
pagingType: "full_numbers",
pageLength: 10,
scrollCollapse: true,
processing: true,
fixedHeader: true,
destroy: true,
columns: [
{data: 'test1'},
{data: 'test2'},
{data: 'test3'},
]
}
//http.get for response
this.http
.get(url, {params})
.subscribe((res) => {
this.results = res;
this.dtTrigger.next();
}
//Table destroy
ngOnDestroy(): void {
this.dtTrigger.unsubscribe();
}