CODEWITHSUNDEEP
angularionic2
balu
balu

Reputation: 45

How to do pagination in ionic 2?

The app I'm writing has a massive list of a few thousand items, each with an image to create a pager for this data set, but I'm not sure on how to do this. I am trying to implement this in ionic 2. If I am going to scroll my items it has to send the data to back end like if page=1 to 10 and page=10 to 20 like this I have to send and they will correct it.

Upvotes: 2

Views: 6446

Answers (2)

shirjeel khan
shirjeel khan

Reputation: 45

PAGINATION IN IONIC 3

All News HTML PART

 <ion-content >
      <ion-card *ngFor="let all of allNewsVar">
      <ion-list>
         <ion-item >{{all}}</ion-item>
      </ion-list>
      </ion-card>

  <ion-infinite-scroll (ionInfinite)="doInfinite($event)">
    <ion-infinite-scroll-content></ion-infinite-scroll-content>
  </ion-infinite-scroll>
</ion-content>

All News TS FILE PART

export class AllNewsPage {

  allNewsVar = [];
  pageno:any;

constructor( public searchService:SearchListService){
this.allNews();
this.pageno = 1;
}

allNews() {
    return this.searchService.getAllNews(this.pageno).subscribe(
        (res) => {
          let posts = res.data;
          for (let post of posts) {
            console.log(post);
            this.allNewsVar.push(post);
          }
        },
        (err) => {
          console.log(err);
        },
        () => console.log('done!')
    );
  }


doInfinite(infiniteScroll) {
    console.log('done!');
    let nextPageUrl = this.pageno++;
    console.log("next page:"+nextPageUrl);
    this.searchService.getAllNews(nextPageUrl).subscribe(
            data => {
          let posts=data.data;
          for(let post of posts){
             console.log(post);
            this.allNewsVar.push(post);
          }
        },
            err => {
          console.log(err);
        },
        () => console.log('Next Page Loading completed')
    );
    infiniteScroll.complete();
  }

All News Services TS File Part

getAllNews(nextPageUrl){
  this.allNewsResponse = this.http.get(this.allNewsUrl+'?page='+nextPageUrl);
        return this.allNewsResponse;
    }

HOPE THIS HELPS ANY ONE.

Upvotes: 0

Rajesh.k
Rajesh.k

Reputation: 2437

put below code in your HTML:

<ion-content>

 <ion-list>
 <ion-item *ngFor="let i of items">{{i}}</ion-item>
</ion-list>

<ion-infinite-scroll (ionInfinite)="doInfinite($event)">
<ion-infinite-scroll-content></ion-infinite-scroll-content>
</ion-infinite-scroll>

</ion-content>

in your class file put below:

     doInfinite(infiniteScroll) {

     let nextpage=this.pageno++;
     console.log("next page:"+nextpage)
    this.YourService.Your method(nextpage).subscribe(
            data => {
                let posts=data.data;
                for(let post of posts){
                    // console.log(post);
                    this.posts.push(post); 
                }

            },
            err => {
                console.log(err);
            },
            () => console.log('Next Page Loading completed')
        );
  infiniteScroll.complete();
}

I hope it will help you.

Upvotes: 2

Related Questions