Page number not updating after data reloadig

[frankiedrake]

I have some page with a table and pagination on it. And user can execute some actions with a data on that table and after pressing a submit button - data reloads (taking new value from a backend) and pagination should jump on a first page. I'm doing this setting the page number in an ngOnChanges event. And data DOES displaying the first page after reload, but page number remains one I left on.

Pagination initialization: <tr *ngFor="let row of data | paginate: { id: id, itemsPerPage: itemsPerPage, currentPage: page }; let i = index"></tr>

pagination-controls:

<pagination-controls
    id="{{id}}"
    class="my-pagination centered"
    (pageChange)="page = $event">                            
 </pagination-controls>

onChanges event:

ngOnChanges(): void {
    this.page = 1;
}

What I'm doing wrong?

[michaelbromley]

Hi, it's difficult to tell what exactly is wrong from the code provided. One thing that caught my attention is that in the paginate pipe args, you use the page variable. Then in the pagination-controls inputs you point to paginationConfig.currentPage. Could this be the issue?

[frankiedrake]

Hi, it's difficult to tell what exactly is wrong from the code provided. One thing that caught my attention is that in the paginate pipe args, you use the page variable. Then in the pagination-controls inputs you point to paginationConfig.currentPage. Could this be the issue?

Sorry, that's mistake I've made copying and adapting code for github...

[michaelbromley]

OK. Can you provide a reproduction of the behaviour, or at least some more code?

[frankiedrake]

Seems solved this via the @ViewChild decorator.

@ViewChild(PaginationControlsComponent, {static: false})
    set setComponent(component: PaginationControlsComponent) {
        this.pageConfig = component;
    }

ngOnChanges(): void {
        if (this.pageConfig)
            this.pageConfig.pageChange.emit(1);
    }

[michaelbromley]

That's good, though it seems like an unusual case to need to use ViewChild to make this work. If you are satisfied that it works ok in your case, you can close this issue.

[fousto]

I can confirm the issue. I jumped from version 3.1.1 to 5.0.0 and can see the wrong behaviour only on last version. Just set a pagination, go on the last page, filter the list to show just 1 item this.myList = this.myList.filter(item => item.Id == 1) --> nothing is displayed cause the page is not selected.

The same test on version 3.1.1 works perfectly.

<div *ngFor="let item of myList | paginate: {itemsPerPage: itemsPerPage, currentPage: p }">
            <label style="font-weight:normal">{{item.Description}}</label>
</div>
<hr />
<pagination-controls 
                     maxSize="5"
                     (pageChange)="p = $event"></pagination-controls>