ngb-pagination with query-parameters, when refreshing , always redirect to the first page

Please remember, the issues forum is NOT for support requests. It is for bugs and feature requests only. Please read https://github.com/ng-bootstrap/ng-bootstrap/blob/master/CONTRIBUTING.md and search existing issues (both open and closed) prior to opening any new issue and ensure you follow the instructions therein.

Bug description:

ngb-pagination with query-parameters, when refreshing , always redirect to the first page

Link to minimally-working plunker that reproduces the issue:

My test App uses ng-bootstrap and angular2 .

url is : “/show-users” I get the user data from back server . Implemented function is :

A: --it works fine

a black page ,when click button(“show”),it will show 4 pages of user datas .corresponding routing are “/show-users?page=0”,“/show-users?page=1”, “…page=2”,“…page=3”,

B: --it works fine

if i click different page num ,it will rediret to corresponding page . e.g click pageNum=2, it will redirect wo url: “/show-users?page=3”

C: --has problems

when i refresh the page , e.g. refresh “/show-users?page=2”, the page will show datas of the third page . and page num is “3”.

The problems is when i refresh page ,e.g.“/show-users?page=2” or “3”,“1”, the url is becaming “/show-users?page=2” or “3”,“1” ,

but it always redirect to the first page “/show-users?page=0” why ? ,

html code :

<button md-icon-button [disabled]="" (click)="startQuery() ">
  <md-icon class="md-24">search</md-icon>
</button>

<hr>
<ul class="list-group">
  <li class="list-group-item list-group-item-action"
      *ngFor="let m of user|async"
      (click)="clickUser(m)">{{m.email}}
  </li>
</ul>

<hr>

<div *ngIf="user">
  <ngb-pagination [collectionSize]="totalPages"
                  [(page)]="currentPage"
                  [maxSize]="5" [rotate]="true" [boundaryLinks]="true"
                  (pageChange)="pageChange()">

  </ngb-pagination>
</div>

angular2 component:

export class RechargeComponent implements OnInit {
  private url= Constant.adminQueryUserWithPage;
  private currentPage:number=1;
  private user: Observable<any>;
  private totalPages:number=0

  constructor( private http: Http, private request: RequestService,
              private location: Location, private convert: Convert,
              private route: ActivatedRoute) { }

  ngOnInit() {
       if( this.route.snapshot.queryParams){
      const m=JSON.parse(JSON.stringify(this.route.snapshot.queryParams));
      console.log(m);
      if(m['page']){

        this.currentPage=+m['page']+1;

        const r = this.queryUserWithPages();
        this.user = r.map(e=>e.content);

        this.queryUserWithPages().subscribe(
          e=>{
            this.totalPages= e['totalPages']*10
          }
        )
      }

      else{
        this.user=undefined;
      }
    }

    else {
      this.user=undefined;
    }

  }

  startQuery(){
    const result = this
      .queryUserWithPages();
    this.user = result.map(e=>e.content);
    this.queryUserWithPages().subscribe(
      e=>{
        this.totalPages= e['totalPages']*10
      }
    )
  }

  pageChange() {

   const result = this
      .queryUserWithPages();
    const m={
      page:this.currentPage-1
    }

    this.user = result.map(e=>e.content);

    this.location.replaceState('/show-users',
      this.convert.serializeToQueryParam(m));

  }



  // query server data 。
  queryUserWithPages() {
    const p = new URLSearchParams();
    p.set('page', (this.currentPage-1).toString());

    return this.http.get(this.url, this.request.getAuthOptions(p))
      .map(res=>res.json());

  }

}

You can use this template as a starting point: http://plnkr.co/edit/i3ajJvZ3bjQyk2I3rDmy?p=preview

Version of Angular, ng-bootstrap, and Bootstrap:

Angular: 2.1.0

ng-bootstrap:1.0.0-alpha.9

Bootstrap:4.0.0-alpha.5

[kesarion]

Sure, I wasn’t certain what the issue was; now I am.

This is the first and only relevant result on google on the issue. Since people will be landing here, I’ll explain the issue and offer a workaround:

When the collectionSize (list total) value is loaded asynchronously, the ngb-bootstrap component resets the page to 1, normally it should stay at the currently set page or switch to the last possible page, if any.

To work around this issue, use *ngIf="total" on the pagination component or a parent, so the component will have the current page and collectionSize at the same time and won’t reset to 1.

I’ll create an issue for it when I have the time if it doesn’t exist already. The plunker is updated to reflect the issue precisely.

[pkozlowski-opensource]

@keryhu commenting on closed issues doesn’t make much sense… If you believe that there is a bug that we should fix, please one a new issue. Thnx!