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

【问题标题】：How to disable last page button in primeNG datatable?如何禁用primeNG数据表中的最后一页按钮？
【发布时间】：2017-11-14 17:50:02
【问题描述】：

我想禁用 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 > >|

【问题讨论】：

请使用正确的标签。 Primefaces = jsf，primeng = 角度。所以你的问题与primefaces无关。
对不起先生，我编辑它。

标签： angular primeng primeng-datatable

【解决方案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

【讨论】：

我应该把这些代码放在哪里？组件 CSS？它对我不起作用。我不想禁用/隐藏所有最后一页按钮。我只想禁用/隐藏此页面.
我现在已经更新了答案。我还添加了一个 Plunker 演示
非常感谢，我会努力的。