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

[robMaiSill]

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>

[robMaiSill]

You can use the "paginationApi" to emit the pageChange-event only when the user clicks back or forth:

...
export class PaginationControlsComponent {

    @Output() pageChange: EventEmitter<any> = new EventEmitter<any>();
    @Input() id: number;
    @ViewChild('paginationApi') paginationApi: PaginationControlsDirective;

    private _currentPage: number;
    private _lastPage: number;

    constructor() {
        'ngInject';
    }

    setCurrent(page: number) {
        if (this._lastPage !== page) {
            this._lastPage = this._currentPage;
            this._currentPage = page;
            this.paginationApi.setCurrent(page);
            this.pageChange.emit(page);
        }
    }

    next() {
        if (!this.paginationApi.isLastPage()) {
            const currentPage = this.paginationApi.getCurrent();
            this.setCurrent(currentPage + 1);
        }
    }

    previous() {
        const currentPage = this.paginationApi.getCurrent();
        if (currentPage !== 1) {
            this.setCurrent(currentPage - 1);
        }
    }
}

[michaelbromley]

Hi,

Thanks for reporting the issue. I think it might be worthwhile to create a second event, perhaps correctPage or something like that, which fires when an automatic page correction occurs. This would leave the implementer free to listen to either one or both of the events, as you say.

I will look into making this change in the next update I make for the lib. Not sure when I'll get round to it. I hope your work-around is sufficient for the time-being.

[banony]

Hi,

Did you solve this issue?
I'm really waiting for that.

Thanks

[jtan80813]

@michaelbromley . Hi Michael. Is this fixed? I currently have the same problem until now. Thanks

[michaelbromley]

Hi all. I'll look into getting this feature implemented and releasing a new major version soon, maybe today.

[jtan80813]

@michaelbromley. Thanks! Looking forward to it later :)

[jtan80813]

@michaelbromley. Hi Michael. Did you already deployed it in 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

[michaelbromley]

@jtan80813 yes, this is now published on npm.