Server side paging in angular datatable .

In .ts file, create a method for set page value,

setPage(pageInfo: any) {
var first=(pageInfo.offset*10)+1; //here offset give the page no
var last=(pageInfo.offset+1)*10; //click by paging
this.getListByPage(first,last)
}

Now, write method for fetching list :

getListByPage(first:number, last:number) {
this.firstIndex=first;
this.lastIndex=last;
debugger;
this.myService.getListByPage(Id,first,last)
.subscribe(data => {
this.rows = data;
}, error => {
console.log(error);
});
}

In myservice method :

getListByPage(id: any, first:number,last:number): Observable {
return this.http.get(this.webApiBaseUrl + id+'/'+first+'/'+last).pipe(
tap(data => { if (data) this.myList = data; }),
catchError(err => {
this.toastr.error("Failed to load my list!" + err, "Error");
return Observable.throw(err);
})
);
}

At server side:-

"getListByPage/{id}/{first}/{last}")>
Public Function getListByPage(qspclientid As Integer, first As Integer, last As Integer) As List(Of myModel)
//write your logic here, however this function written in VB
End Function

2 Replies

Know the answer? Post it — somebody with the same question will find it here.

amit shukla8y ago
Hi Mahesh,
Thanks for your replay.
but my question, i want add custom pagging with sorting and searching in angular datatable.
i have used angular datatable and he is working fine but in this case we want use custom
pagging in datatable.
Mahesh Verma8y ago
In .ts file, create a method for set page value,
setPage(pageInfo: any) {
      var first=(pageInfo.offset*10)+1;           //here offset give the page no
      var last=(pageInfo.offset+1)*10;           //click by paging
      this.getListByPage(first,last)
    }
Now, write method for fetching list :
getListByPage(first:number, last:number) {
       this.firstIndex=first;
       this.lastIndex=last;
       debugger;
       this.myService.getListByPage(Id,first,last)
           .subscribe(data => {
                this.rows = data;
           }, error => {
               console.log(error);
           });

   }
In myservice method :
getListByPage(id: any, first:number,last:number): Observable {
       return this.http.get(this.webApiBaseUrl + id+'/'+first+'/'+last).pipe(
           tap(data => { if (data) this.myList = data; }),
           catchError(err => {
               this.toastr.error("Failed to load my list!" + err, "Error");
               return Observable.throw(err);
           })
       );
   }
At server side:-
"getListByPage/{id}/{first}/{last}")>

Public Function getListByPage(qspclientid As Integer, first As Integer, last As Integer) As List(Of myModel)

//write your logic here, however this function written in VB

End Function