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

我的最后一页风格如下： 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（两个表，一个最后一个按钮被禁用）： Click here

如何在primeNG数据表中禁用最后一页按钮？

1 个答案: