Setting new items results in a re-submit of server-side paging

Angular version: 2.4.4

ngx-pagination version: 3.0.0

Description of issue: When new items are set in a list that is being paginated, and the total items are fewer than those shown on the current page, ngx-pagination switches pages and emits a “pageChange” event. In the case of server-side paging, this results in re-submitting the server-side request.

Steps to reproduce: For example: The user searches on server and receives the first 10 items of a 20-result set (totalItems: 20, itemsPerPage: 10). The user jumps to the second page and a request is made to fetch the second set of 10 items. Finally, the user executes a new search that only contains a total of 8 items. This results in ngx-pagination switching to page one, thereby triggering a “pageChange” event and triggering a second, unwanted backend paging request.

Expected result: When setting new items in a list that have fewer totalItems than the previous set of items, the page should be changed but no pageChange event should be emitted. Alternatively, there should be two types of pageChange events, one for user-triggered page changes and one for page changes that are automatically executed due to changes in totalItems.

Actual result: A second, unwanted server paging request is executed.

Demo: (if possible, edit this Plunker demo and paste the link to your fork)

Any relevant code:

<pagination-template #p="paginationApi"
                     [id]="id"
                     (pageChange)="onPageChange($event)"><!--executes server request-->

    <div>
        <!-- pagination -->
        <ul class="pagination" *ngIf="p.getLastPage() > 1">
            <li [ngClass]="{disabled: p.isFirstPage()}"><a (click)="p.setCurrent(1)">«</a></li>
            <li [ngClass]="{disabled: p.isFirstPage()}"><a (click)="p.previous()" >‹</a></li>

            <li *ngFor="let page of p.pages" [ngClass]="{active: page.value === p.getCurrent()}" [class.current]="p.getCurrent() === page.value">
                <a (click)="p.setCurrent(page.value)">
                    <span>{{ page.label }}</span>
                </a>
            </li>

            <li [ngClass]="{disabled: p.isLastPage()}"><a (click)="onNext(p)">›</a></li>
            <li [ngClass]="{disabled: p.isLastPage()}"><a (click)="p.setCurrent(p.getLastPage())">»</a></li>
        </ul>
        <!-- ~~~~~~~~ -->
    </div>

</pagination-template>

[michaelbromley]

@jtan80813 yes, this is now published on npm.

[michaelbromley]

Fixed in v5.0.0!

Note that this is a breaking change. See Changelog for more details: https://github.com/michaelbromley/ngx-pagination/blob/master/CHANGELOG.md#500-2019-12-02