Btukfyl

I am trying to implement server side pagination but I cannot get how to do it, I checked multiple answers here and I just didn't find something that I could make it work with.

I am trying to use ngx-pagination: https://github.com/michaelbromley/ngx-pagination#readme

This is my swagger response:

{

  "count": 34,

  "next": "http://0.0.0.0:8000/api/transaction/history?page=2",

  "previous": null,

  "results": [...]

}

I am now looking at how to implement that, I understand that I need to navigate to next page and previous page, but not sure on how to do it. This is how my component looks for now:

transactionsModel: TransactionModel = ;

  page = 1;

  total: number;



  constructor(private billingService: BillingHistoryService, private router: Router) { }



  ngOnInit() {

    this.getAllTransactions();

  }



  getAllTransactions() {

    this.billingService.getTransactions(this.page)

        .subscribe((response: any) => {

          this.transactionsModel = response.results;

          this.total = response.results.length;

        }, (error) => {



        });

  }



  someFunction(e) {

   // next/prev need to be handled here I guess

  }



  next() {

      this.page++;

      this.router.navigate(['/billing-history'], {queryParams: {page: this.page}});

  }



    prev() {

        this.page--;

        this.router.navigate(['/billing-history'], {queryParams: {page: this.page}});

    }

And in my service I only have the:

private getTransactionsUrl = environment.apiUrl + '/transaction/history';



  constructor(private http: HttpRequestService) { }



  getTransactions() {

    return this.http.get(this.getTransactionsUrl);

  }

Do I need to add page to my service as a param? And how to trigger the next value in:

    <pagination-controls (pageChange)="someFunction($event)" id="billing-items"></pagination-controls>

Thanks in advance.

When someone uses the pagination-controls to navigate to the next or previous page, the pageChange output is triggered where $event equals the new page number. Looks like you need to implement someFunction($event) such that it receives one argument, the desired page number, and uses that argument to fetch all necessary data from the server and update any necessary variables.

The server pagination example in the documentation describes all of this with an example: http://michaelbromley.github.io/ngx-pagination/#/server-paging. Not sure what else you need. You even seem to acknowledge that this is what you need to do in a comment in your pasted code.

someFunction(pageNumber: number) {

 // next/prev need to be handled here I guess

}