Server Side Pagination Using Angular 7 And NgxPagination

Question

I'm trying to code pagination using NgxPagination. But I don't know how to pass pageIndex from component to service. It only display one page only. And can't go to next page.image reference

I provided code bellow for your reference.

HTML

<ng-container
  matColumnDef="{{ column }}"
  *ngFor="let column of columnsToDisplay | paginate: { id: 'server',
  itemsPerPage: 10, currentPage: p, totalItems: total }"
          >... </ng-container>    
<pagination-controls (pageChange)="loadData($event)" id="server"></pagination-controls>

Component ts

length:number;
  pageIndex :number;
  p: number = 1;
  total: number;

  loadData(pageIndex){

  this.listservice.getListService(pageIndex).subscribe(res =>{
      this.dataSource = new MatTableDataSource<ListDetails>(res);

  this.total = res.total;
  this.p = pageIndex;

}

And in my service code I make like bellow

service

getListService(page:number): Observable<any>  {
    const urls: string = `http://192.168.0.101:9080/projek/api/listall/${Id}`
   const rUrl: string = `${urls}/${page + 1}/desc`;
    return this.http.get<AllDetails>(rUrl).pipe(map(res => res['allList']));
  }

What should I add to make it work.

Hope you all can help me

Thanks in advance.

score 0 · Answer 1 · answered Aug 20 '19 at 05:08

0

you have to change

<pagination-controls (pageChange)="loadData($event)" id="server"></pagination-controls>

to

<pagination-controls (pageChange)="loadAgents($event)" id="server"></pagination-controls>

As there is no loadData method in your component

answered Aug 20 '19 at 05:08

jitender

10,238
1
18
44

score 0 · Answer 2 · answered Aug 20 '19 at 07:35

0

In any case did you forgot to add the paginate pipe on the mattable's datasource? Something like

<table mat-table [dataSource]="listData | paginate { ... }">
  ...
</table>

answered Aug 20 '19 at 07:35

ErxrilOwl

79
4

I've put it `*ngFor="let column of columnsToDisplay | paginate: { id: 'server', itemsPerPage: 10, currentPage: p, totalItems: total }"` but it does not work too – swapy Aug 20 '19 at 07:37
How many is the count of your api result? Maybe it does not create other pages because it is less than your itemsPerPage? – ErxrilOwl Aug 20 '19 at 07:58
Actually, My APi like this.. `http://192.168.0.101:9080/project/api/listall/com/1/desc`. Number 1 refer to page. If change to 2 it go to page 2 and so on... That why I put `${page + 1}` in my service to plus page. But I don't know why it does not work – swapy Aug 20 '19 at 08:11
In your api are you returning the total rows of your data in your db? this.total = res.total; – ErxrilOwl Aug 20 '19 at 08:21
backend code being set to 10 rows perpage to display – swapy Aug 20 '19 at 08:30
1

I see, I think you should use the overall total of your data in your total in the component. It is like your total is 10 divided by 10 per page so it is 1 it should be something like total is 100 divided by 10 per page so you'll get 10 pages – ErxrilOwl Aug 20 '19 at 08:32
oo.. I see... So, I need backend to pass all data..And let forntend to control it... Thank you so much... I understood.. – swapy Aug 20 '19 at 09:11
even not all data. Just the total of all data – ErxrilOwl Aug 20 '19 at 09:54

Server Side Pagination Using Angular 7 And NgxPagination

2 Answers2