Angular 6 datatable serverside ajax request not working - ajax

Question

I am using angular datatable(1.10.19).
ref this for server side angular way
I have written web api in c# to get the data in desired format.
With following dtoptions, server side is working fine.
dtOptions = {
pagingType: 'full_numbers',
pageLength: 10,
processing: true,
serverSide: true,
orderCellsTop: true,
ajax: (dataTablesParameters: any, callback) => {
this.mainpageservice.GetPaginatedData(this.menuID, this.UserName, dataTablesParameters)
.subscribe(resp => {
this.Module = resp.data;
console.log('serverside', this.Module);
callback({
recordsTotal: resp.recordsTotal,
recordsFiltered: resp.recordsFiltered,
data: [],
});
});
},
Now, I want to display multiple tables that too using serverside angular way datatable. so to achieve this, I am using: for multiple datatables
as documented, I have created one function which is returning Datatable settings. But here ajax call is not working.
Can anyone suggest where I am doing wrong?.
private buildDtOptions(menu: number, Username: string): DataTables.Settings {
alert('call');
return {
pagingType: 'full_numbers',
pageLength: 10,
processing: true,
serverSide: true,
orderCellsTop: true,
ajax: (dataTablesParameters: any, callback) => {
console.log(dataTablesParameters);
this.mainpageservice.GetPaginatedData(menu, Username, dataTablesParameters).subscribe(resp => {
this.Module = resp.data;
console.log('serverside', this.Module);
callback({
recordsTotal: resp.recordsTotal,
recordsFiltered: resp.recordsFiltered,
data: [],
});
});
}
};
}

Answer 1

Not sure if you ran into the same issue that I did or not, but when I was moving to the "Server side the Angular way" from the "Angular Way", I forgot to remove the dtTrigger reference from the markup. Once I removed [dtTrigger]="dtTrigger" from the table tag all was good in my world.