CODEWITHSUNDEEP
ajaxangulardatatables-1.10angular-datatables
BitDirector
BitDirector

Reputation: 21

Angular 6 datatable serverside ajax request not working

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: [],
                    });
                });
        }

    };
}

Upvotes: 2

Views: 1954

Answers (1)

Gorny
Gorny

Reputation: 41

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.

Upvotes: 4

Related Questions