Edit Previous, Next page

src/app/DPU/myjob/company-manage/company-manage.component.html

@@ -52,8 +52,8 @@
               </tr>
             </thead>
             <tbody>
-              @if (filterList.length > 0) {
-              @for (item of filterList; track item.companyId) {
+              @if (pagedList.length > 0) {
+              @for (item of pagedList; track item.companyId) {
               <tr class="border border-defaultborder dark:border-defaultborder/10">
                 <td class="product-checkbox">
                   <input class="form-check-input" type="checkbox" [checked]="selectedItems.get(item.companyId) || false"
@@ -126,35 +126,25 @@
         <div class="flex items-center flex-wrap overflow-auto" *ngIf="filterList.length > 0">
           <div class="mb-2 sm:mb-0">
             <div>
-              {{'Showing' | translate}} {{filterList.length}} {{'entries'
-              | translate}} <i class="bi bi-arrow-right ms-2 font-semibold"></i>
+              {{'Showing' | translate}} {{ (pageIndex * pageSize) + 1 }} – {{ showingEnd }} {{'entries' | translate}}
+              <i class="bi bi-arrow-right ms-2 font-semibold"></i>
             </div>
           </div>
           <div class="ms-auto">
-            <nav aria-label="Page navigation">
+            <nav aria-label="Page navigation" *ngIf="totalPages > 1">
               <ul class="ti-pagination mb-0">
-                <li *ngIf="pageIndex>0" class="page-item {{pageIndex==0 ? 'disabled' : ''}}"><a
-                    class="page-link px-3 py-[0.375rem] cursor-pointer"
-                    (click)="pageIndex = pageIndex-1;updatePagedItems()">{{'Previous' | translate}}</a></li>
-                <li class="page-item"><a class="page-link px-3 py-[0.375rem]" href="javascript:void(0);"
-                    *ngIf="pageIndex-1>0" (click)="pageIndex = pageIndex-2;updatePagedItems()">{{pageIndex-1}}</a></li>
-                <li class="page-item"><a class="page-link px-3 py-[0.375rem]" href="javascript:void(0);"
-                    *ngIf="pageIndex>0 && ((pageIndex-1)*10 < (searchTerm == '' ? itemsList.length : filterList.length))"
-                    (click)="pageIndex = pageIndex-1;updatePagedItems()">{{pageIndex}}</a></li>
+                <li class="page-item" [class.disabled]="pageIndex === 0">
+                  <a class="page-link px-3 py-[0.375rem] cursor-pointer" (click)="goPrev()">{{'Previous' | translate}}</a>
+                </li>
 
-                <li class="page-item"><a class="page-link active px-3 py-[0.375rem]"
-                    href="javascript:void(0);">{{pageIndex +1}}</a>
+                <li class="page-item" *ngFor="let p of pages">
+                  <a class="page-link px-3 py-[0.375rem] cursor-pointer"
+                    [class.active]="p === pageIndex"
+                    (click)="goTo(p)">{{ p + 1 }}</a>
                 </li>
-                <li class="page-item"><a class="page-link px-3 py-[0.375rem]" href="javascript:void(0);"
-                    *ngIf="(pageIndex+1)*10 < (searchTerm == '' ? itemsList.length : filterList.length)"
-                    (click)="pageIndex = pageIndex+1;updatePagedItems()">{{pageIndex +2}}</a></li>
-                <li class="page-item"><a class="page-link px-3 py-[0.375rem]" href="javascript:void(0);"
-                    *ngIf="(pageIndex+2)*10 < (searchTerm == '' ? itemsList.length : filterList.length)"
-                    (click)="pageIndex = pageIndex+2;updatePagedItems()">{{pageIndex +3}}</a></li>
-                <li *ngIf="(pageIndex+1)*10 < (searchTerm == '' ? itemsList.length : filterList.length)"
-                  class="page-item"><a class="page-link px-3 py-[0.375rem] cursor-pointer"
-                    (click)="pageIndex = pageIndex+1;updatePagedItems()">{{'Next' |
-                    translate}}</a>
+
+                <li class="page-item" [class.disabled]="pageIndex >= totalPages - 1">
+                  <a class="page-link px-3 py-[0.375rem] cursor-pointer" (click)="goNext()">{{'Next' | translate}}</a>
                 </li>
               </ul>
             </nav>

src/app/DPU/myjob/company-manage/company-manage.component.ts

@@ -47,6 +47,10 @@ export class CompanyManageComponent {
   // empList: CompanyModelS[] = [];
   // descName = 'engName'; 
   pageIndex = 0;
+  pageSize = 10;
+  totalCount = 0;
+  totalPages = 1;
+  pagedList: CompanyModelS[] = [];
   uploaderProfile: FileUploader | undefined;
   uploadErrorMsg: string = "";
 
@@ -65,8 +69,9 @@ export class CompanyManageComponent {
     if (val != '') {
       this.filterList = this.filter(val);
     } else {
-      this.updatePagedItems();
+      this.filterList = this.itemsList.slice();  // ให้กลับมาเป็นทั้งหมด
     }
+    this.onSearchChange(); // ← อัปเดตเพจทุกครั้ง
   }
 
   _searchTerm = "";
@@ -129,7 +134,7 @@ export class CompanyManageComponent {
     this.comService.getList().subscribe({
       next: (response: CompanyModelS[]) => {
         this.itemsList = response.map((x: any) => new CompanyModelS(x, this.translate));
-        console.log('ข้อมูลบริษัท (itemsList)', this.itemsList);
+        this.filterList = this.itemsList.slice();
         this.updatePagedItems();
       },
       error: (error) => {
@@ -306,9 +311,13 @@ export class CompanyManageComponent {
 
 
   updatePagedItems() {
-    const startIndex = this.pageIndex * 10;
-    const endIndex = startIndex + 10;
-    this.filterList = this.itemsList.slice(startIndex, endIndex);
+    this.totalCount = this.filterList.length;
+    this.totalPages = Math.max(1, Math.ceil(this.totalCount / this.pageSize));
+
+    const startIndex = this.pageIndex * this.pageSize;
+    const endIndex = startIndex + this.pageSize;
+
+    this.pagedList = this.filterList.slice(startIndex, endIndex);
   }
 
   toggleAll(event: any) {
@@ -431,6 +440,41 @@ export class CompanyManageComponent {
 
     event.target.value = filtered;
   }
+
+  onSearchChange() {
+  this.pageIndex = 0;
+  this.updatePagedItems();
+  }
+
+  get pages(): number[] {
+  return Array.from({ length: this.totalPages }, (_, i) => i);
+  }
+
+  get showingEnd(): number {
+    return Math.min((this.pageIndex + 1) * this.pageSize, this.totalCount);
+  }
+
+  goPrev() {
+    if (this.pageIndex > 0) {
+      this.pageIndex--;
+      this.updatePagedItems();
+    }
+  }
+
+  goNext() {
+    if (this.pageIndex < this.totalPages - 1) {
+      this.pageIndex++;
+      this.updatePagedItems();
+    }
+  }
+
+  goTo(p: number) {
+    if (p >= 0 && p < this.totalPages && p !== this.pageIndex) {
+      this.pageIndex = p;
+      this.updatePagedItems();
+    }
+  }
+
 }
 // import { Component, ElementRef, ViewChild } from '@angular/core';
 // import { DomSanitizer, SafeHtml } from '@angular/platform-browser';