diff --git a/npm/ng-packs/packages/core/src/lib/services/list.service.ts b/npm/ng-packs/packages/core/src/lib/services/list.service.ts index 1a1e7c1aeb..135b13a912 100644 --- a/npm/ng-packs/packages/core/src/lib/services/list.service.ts +++ b/npm/ng-packs/packages/core/src/lib/services/list.service.ts @@ -17,8 +17,6 @@ import { LIST_QUERY_DEBOUNCE_TIME } from '../tokens/list.token'; export class ListService implements OnDestroy { private _filter = ''; set filter(value: string) { - if (this._filter !== value) this._page = 0; - this._filter = value; this.get(); } @@ -35,6 +33,7 @@ export class ListService implements OnDes return this._maxResultCount; } + private _skipCount = 0; private _page = 0; set page(value: number) { if (value === this._page) return; @@ -81,6 +80,7 @@ export class ListService implements OnDes } get = () => { + this.resetPageWhenUnchanged(); this._query$.next(({ filter: this._filter || undefined, maxResultCount: this._maxResultCount, @@ -110,6 +110,15 @@ export class ListService implements OnDes ngOnDestroy() { this.destroy$.next(); } + + private resetPageWhenUnchanged() { + const skipCount = this._page * this._maxResultCount; + + if (skipCount === this._skipCount) { + this._page = 0; + this._skipCount = 0; + } else this._skipCount = skipCount; + } } export type QueryStreamCreatorCallback = ( diff --git a/npm/ng-packs/packages/theme-shared/src/lib/directives/ngx-datatable-list.directive.ts b/npm/ng-packs/packages/theme-shared/src/lib/directives/ngx-datatable-list.directive.ts index 7dc81ab6b9..38ebee5352 100644 --- a/npm/ng-packs/packages/theme-shared/src/lib/directives/ngx-datatable-list.directive.ts +++ b/npm/ng-packs/packages/theme-shared/src/lib/directives/ngx-datatable-list.directive.ts @@ -68,22 +68,22 @@ export class NgxDatatableListDirective implements OnChanges, OnDestroy, OnInit { } private subscribeToQuery() { - this.querySubscription.add( - this.list.query$.subscribe(() => { - if (this.list.page !== this.table.offset) this.table.offset = this.list.page; - }), - ); + if (!this.querySubscription.closed) this.querySubscription.unsubscribe(); + + this.querySubscription = this.list.query$.subscribe(() => { + const offset = this.list.page; + if (this.table.offset !== offset) this.table.offset = offset; + }); } ngOnChanges({ list }: SimpleChanges) { + this.subscribeToQuery(); + if (!list.firstChange) return; const { maxResultCount, page } = list.currentValue; this.table.limit = maxResultCount; this.table.offset = page; - - this.querySubscription.unsubscribe(); - this.subscribeToQuery(); } ngOnDestroy() {