PrimeNG 分頁器設置頁面

Question

我在 Angular 9 項目中使用 primeng paginator 組件來分頁大量的配置文件。 如果用戶在第 3 頁，打開個人資料並返回搜索，當前頁面是 1，但應該是 3。我已將該頁面保存在服務中，因此顯示了正確的數據，但分頁器顯示的是錯誤的頁面。 我找不到設置分頁器當前頁面的方法。 使用 [first] 屬性不起作用。

Answer 1

您需要手動設置頁面。 您可以使用 Angular @ViewChild裝飾器來訪問 PrimeNg Paginator組件。

給模板中的分頁器一個 id：

<p-paginator #paginator ...></p-paginator>

並在組件中使用它：

import { Paginator } from 'primeng/paginator';


@ViewChild('paginator', { static: true }) paginator: Paginator

private updateCurrentPage(currentPage: number): void {
  setTimeout(() => this.paginator.changePage(currentPage));
}

Answer 2

第一個屬性是定義Primeng提供的尋呼機當前頁面的最佳選項。

第一個 = (page-1) * 行；

在模板中，

      <p-paginator
        [rows]="10"
        [totalRecords]="120"
        [rowsPerPageOptions]="[10, 20, 30]"
        [first]="first"
      ></p-paginator>

在組件中，

    pageSize = 10;  
    currentpage = 2;
    first;
    
     ngOnInit() {     
        this.first =  (this.currentpage-1)* this.pageSize;
     }

它將成功設置活動頁面而不使用 setTimeout。

Answer 3

如果您有一個列表組件作為子組件，那么您可以將 Pagination event.first 的值保留在父組件中並將其傳遞回子組件，如下所示。

@Input() paginationFirstValue: number = 0;
<p-paginator
      #paginator
      [first]="paginationFirstValue"
      [rows]="10"
      selectionMode="single"
      [alwaysShow]="false"
      [totalRecords]="dataObj.total"
      (onPageChange)="paginate($event)"
    ></p-paginator>

並將事件發送給父級

paginate(event: Pagination): void {
this.paginationFirstValue = event.first;
this.pageChange.next(event);

}

Answer 4

分頁器當前頁面使用第一個屬性進行管理。 第一個屬性必須包含顯示的第一行的索引。 您可以使用事件處理程序中的 Event.first 自動執行此操作：onPageChange($event)

解決方案：在視圖中，創建一個分頁器：

<p-paginator [rows]="paginatorPageSize" [totalRecords]="paginatorTotalRecords" (onPageChange)="paginate($event)"
             [first]="paginatorFirstRecordIndex"></p-paginator>

// controller 變化

 paginate($event) {
  ...
    this.paginatorFirstRecordIndex=$event.first