Ngx-bootstrap: Take the initial page for the pagination from a query param

[Scipionh]

Hey, how can I update the pagination once I get my pageNumber from the query string. At the minute, everything seems update by the indicator doesn't indicate any page and I can still click on the current page. I have seen that the function used when clicking on one of the item is "selectPage", do I have to call this function with the page number I got from my queryString ?

Thanks !

[patrickpereira]

+1

[sdornan]

I'm having this same issue. Pagination display is always set to 1.

[ht89]

I also have the same issue. Please fix it. Thanks a lot.

[efuturetoday]

+1 same issue here. The problem seems to be that during ngModelChange the component will check if the page is < totalCount if its not it will set the page to 1. Maybe we need to set both values at the same time.

[ht89]

@efuturetoday thanks for sharing. I had to use Paginations of ng-lightning library, the current page of which can be changed. Check it out here

[san4ezz87]

+1

[san4ezz87]

can you make it please

[EinarValholl]

1 hour being spent for so simple solution

`

@Input() activePage;

ngOnChanges() {
if(!!this.activePage) {
this.setPageFromRoute = true;
this.activePage = parseInt(this.activePage); // !important
}
}
`

[efuturetoday]

thanks for sharing. I think defining a "state" would be a good approach.
I wrote a little Pager myself. The key code parts:

export interface PaginationState {
  currentPage: number;
  totalCount: number;
  itemsPerPage: number;
}

@Input('state')
  set state(state: PaginationState) {
    if (!state) {
      return;
    }
    this._state = state;

    // TODO: Normalize Page to 1 when its higher than maxPages?

    this.setPage(this._state.currentPage, false);
  }

  get state() {
    return this._state;
  }

setPage(page: number, emitChange: boolean = true): void {
    if (this.havePage(page)) {
      this._state.currentPage = page;

      let viewLower: number = this.currentSegment * this._viewLimit;
      let viewUpper: number = Math.min(viewLower + this._viewLimit, this.maxPage);

      let delta: number = viewUpper - viewLower;

      this.pages = Array(delta).fill(0).map((x: number, i: number) => viewLower + i + 1);

      if (emitChange) this.pageChange.next(this.currentPage);
    } else {
      this.pages = null;
    }
  }

The idea is that everytime the controller sets the state we dont trigger a pageChange event. Only when a user changes a page we trigger the pageChangeEvent. (When clicking on the pagination - not by setting the state by the controller).
Thats suits more for a pagination because we want to fetch a result from the server when the user changes the page and want to update the state by receiving the result from server without to trigger pagechange again. (loop).

In the view:

<sp-pagination [state]="paginationState" (pageChange)="onPageChange($event)"></sp-pagination>

The controller for the view:

onPageChange(newPage: number) {
    this.filter.skip = this.filter.limit * (newPage - 1);

    this._sales.getSales(this.filter)
      .subscribe((sales) => {
        this.sales = sales;

        this.paginationState = {
          currentPage: 1 + this.filter.skip / this.filter.limit,
          totalCount: sales.count,
          itemsPerPage: this.filter.limit
        }

      }, (err) => {
        this._handleError(err, 'Sales konnten nicht abgerufen werden!');
      });
  }

[dottodot]

@EinarValholl l would you be able to post the full solution I'm struggle to work it out from what you posted.

However really it needs fixing so that the page number can be set.

[ghwyf]

1600 @niklissad ,his solution figured my problem out.

when you get page from url ,you need to parse it from string to number.

[dromadaire54]

Hi I have the same problem and I parsed the selected page from string to number. But it doesn't fix my problem. The selected page is always the first page. It's an annoying problem for me.

[ghwyf]

try this
setTimeout(()=>this.pageModel.currentPage = parseInt(page),1)

[dromadaire54]

it doesn't fix the issue. The displayed page is the right but not the selected page.

[dromadaire54]

It's very strange. I initialise the current page in the ngOnInit method.

[dromadaire54]

I figured out the problem. It's due to the total items. The pagination layout is displayed before that the total items is loaded. You must add this code.
<div *ngIf="total_items"><pagination></pagination></div>

[IlyaSurmay]

Could someone create a plunkr/stackblitz that reproduces this issue?
You can use one of starter templates:
Plunkr: https://plnkr.co/edit/0NipkZrnckZZROAcnjzB?p=preview
StackBlitz: https://stackblitz.com/edit/ngx-bootstrap?file=app%2Fapp.module.ts