Server side paging in angular datatable .

Question

Hi Friends, I am working on angular 2 & 4 and i want to use angular datatable in my project with server side pagging, searching and sorting. Please suggest me how to implement or share complete code of this.

Mahesh Verma · Answer

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

amit shukla · Answer

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.

Server side paging in angular datatable .

Insert Link

Embed YouTube Video

Table Options

Insert Image

Answers (2)