如何禁用primeNG數據表中的最后一頁按鈕？

Question

我想在primeNG div中禁用最后一頁按鈕。 分頁器位於p-datatable標簽中。

代碼：

  <div class="ui-g-12">
      <p-dataTable [value]="bossDataTable" resizableColumns="true" columnResizeMode="expand" [lazy]="true" [rows]="15" [paginator]="true"
      [totalRecords]="totalRecords" [rowsPerPageOptions]="[15,20,25,30,40,50]" (onLazyLoad)="getBossDataTable($event)" >

         <!--some columns here -->
          <p-footer><span><label i18n>Total:</label> {{totalRecords}}</span></p-footer>
      </p-dataTable>

根據文檔： https://www.primefaces.org/primeng/#/paginator : https://www.primefaces.org/primeng/#/paginator

我在這里得到了最后一個頁面樣式： ui-paginator-last

如何禁用最后一頁按鈕？隱藏或禁用它就可以了。

現在分頁器看起來像： |< < 1 2 3 4 5 > >|

Answer 1

您可以使用CSS來隱藏最后一頁按鈕，如下所示：

.ui-paginator > .ui-paginator-last {
  display: none!important;
}

由於.ui-paginator-last是錨標記，您可以通過執行以下操作來模擬它被禁用：

.ui-paginator > .ui-paginator-last {
  pointer-events: none;
  color: gray;
}

如果您希望分頁是唯一的，則可以將其添加到DataTable的頁腳中，並為其指定唯一的styleClass ：

<p-dataTable [value]="cars" (change)="onDataTableChange($event)"
    styleClass="hidden-last"
    resizableColumns="true" [reorderableColumns]="true">
  <p-column *ngFor="let col of cols" [field]="col.field" 
    [header]="col.header"></p-column>
  <p-footer><p-paginator styleClass="paginator1"></p-paginator></p-footer>
</p-dataTable>

然后，您必須做相同的事情，但是使用您給分頁器指定的類名：

.paginator1 > .ui-paginator-last {
  pointer-events: none;
  color: gray;
}

要么：

.paginator1 > .ui-paginator-last {
  display: none!important;
}

這是一個演示此方法的plnkr（兩個表，一個最后一個按鈕已禁用）： 單擊此處