Merge pull request #19203 from abpframework/issue-19194

Fix pagination issue in ExtensibleTableComponent
abpframework · Mar 5, 2024 · ad9b702 · ad9b702
2 parents 5c77046 + fac19db
commit ad9b702
Show file tree

Hide file tree

Showing 4 changed files with 31 additions and 16 deletions.
diff --git a/...components/extensible/src/lib/components/extensible-table/extensible-table.component.html b/...components/extensible/src/lib/components/extensible-table/extensible-table.component.html
@@ -3,6 +3,8 @@
   [rows]="data"
   [count]="recordsTotal"
   [list]="list"
+  [offset]="list?.page"
+  (page)="setPage($event)"
   (activate)="tableActivate.emit($event)"
 >
   @if (actionsTemplate || (actionList.length && hasAtLeastOnePermittedAction)) {

diff --git a/...s/components/extensible/src/lib/components/extensible-table/extensible-table.component.ts b/...s/components/extensible/src/lib/components/extensible-table/extensible-table.component.ts
@@ -1,7 +1,6 @@
 import {
   ABP,
-  ConfigStateService,
-  CoreModule,
+  ConfigStateService, 
   getShortDateFormat,
   getShortDateShortTimeFormat,
   getShortTimeFormat,
@@ -13,9 +12,7 @@ import {
 import {
   AsyncPipe,
   formatDate,
-  NgComponentOutlet,
-  NgFor,
-  NgIf,
+  NgComponentOutlet, 
   NgTemplateOutlet,
 } from '@angular/common';
 import {
@@ -175,7 +172,32 @@ export class ExtensibleTableComponent<R = any> implements OnChanges {
     );
   }
 
-  ngOnChanges({ data }: SimpleChanges) {
+  setPage({ offset }) {
+    this.list.page = offset;
+  }
+
+  ngOnChanges({ data, recordsTotal }: SimpleChanges) {
+    if (data?.currentValue.length < 1 && recordsTotal?.currentValue > 0) {
+      let maxPage = Math.floor(Number(recordsTotal?.currentValue / this.list.maxResultCount));
+
+      if(recordsTotal?.currentValue < this.list.maxResultCount) {
+        this.list.page = 0;
+        return;
+      }
+
+      if (recordsTotal?.currentValue % this.list.maxResultCount === 0) {
+        maxPage -= 1;
+      }
+
+      if (this.list.page < maxPage) {
+        this.list.page = this.list.page;
+        return;
+      }
+
+      this.list.page = maxPage;
+      return;
+    }
+
     if (!data?.currentValue) return;
 
     if (data.currentValue.length < 1) {

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
@@ -150,7 +150,7 @@ export class ListService<QueryParamsType = ABP.PageQueryParams | any> implements
     this._query$.next({
       filter: this._filter || undefined,
       maxResultCount: this._maxResultCount,
-      skipCount: this._filter ? 0 : this._page * this._maxResultCount,
+      skipCount: this._page * this._maxResultCount,
       sorting: this._sortOrder ? `${this._sortKey} ${this._sortOrder}` : undefined,
     } as any as QueryParamsType);
   }

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
@@ -53,14 +53,6 @@ export class NgxDatatableListDirective implements OnChanges, OnDestroy, OnInit {
     };
   }
 
-  private subscribeToPage() {
-    const sub = this.table.page.subscribe(({ offset }) => {
-      this.list.page = offset;
-      this.table.offset = offset;
-    });
-    this.subscription.add(sub);
-  }
-
   private subscribeToSort() {
     const sub = this.table.sort.subscribe(({ sorts: [{ prop, dir }] }) => {
       if (prop === this.list.sortKey && this.list.sortOrder === 'desc') {
@@ -101,7 +93,6 @@ export class NgxDatatableListDirective implements OnChanges, OnDestroy, OnInit {
   }
 
   ngOnInit() {
-    this.subscribeToPage();
     this.subscribeToSort();
   }
 }