Angular: How to change/set current page of jw-pagination?

user_11777715 0
Viewed 333

I'm having a problem with jw-angular-pagination. I was adding custom sort function when I found that I have no control over the page of pagination. I wonder how to change selected page to first after sorting?

My code (simplified):

HTML:

<div *ngFor="let result of pageOfItems">
  // ...
</div>
<jw-pagination class="fadeIn" [items]="affiliates" (changePage)="onChangePage($event)" [pageSize]="pageSize"></jw-pagination>

TS:

affiliates: any[]; // Let's say there are data already
pageOfItemsAffiliates: any;
pageSize = 10;
currentPage = 1;

constructor() {}

onChangePageAffiliates(pageOfItems: Array<any>) {
  this.pageOfItemsAffiliates = pageOfItems;
}

onClickSort(by: string) {
  this.affiliates = this.affiliates.sort((a, b) => {
    return a.totalBalance > b.totalBalance ? -1 : 1;
  });

  this.pageOfItemsAffiliates = this.affiliates.slice(0, this.pageSize);
  this.currentPage = 1;
}

So when I click page 2, then sort, it will show first 10 elements sorted but jw-pagination widget will still be showing page 2 as active (while the truth is it's showing the first page). How to make it work properly?

angular pagination
1 Answers

For now I have achieved it with kind of workaround. Simulating click on first page button. This button is disabled while first page is selected but it doesn't seem to be an issue.

  changeSelectedPageToFirst() {
    let firstElement: HTMLElement = document.getElementsByClassName('first-item')[0] as HTMLElement;
    let clickFirst = firstElement.children[0] as HTMLElement;
    clickFirst.click();
  }

Anyways, still I belive there's some better way to do this?

user_117777150
Related