How to disable last page button in primeNG datatable?

Question

I want to disable last page button in the primeNG datatable div. The paginator is in the p-datatable tag.

code :

  <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>

According to doc: https://www.primefaces.org/primeng/#/paginator

I got last page style here: ui-paginator-last

How can I disable the last page button?Hide it or disable it is OK.

Now the paginator looks like : |< < 1 2 3 4 5 > >|

Please use the correct tags. Primefaces = jsf, primeng = angular. So your question has nothing to do with primefaces. — lastresort

DGarvanski DGarvanski · Accepted Answer · 2017-11-14T09:19:25

You can use CSS to hide the last page button like this:

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

Since .ui-paginator-last is an anchor tag you can simulate it being disabled by doing this:

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

If you want the pagination to be unique you can add it to the footer of the DataTable and give it a unique 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>

Then you'll have to do the same thing, but use the class name you gave the paginator:

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

or:

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

Here's a plnkr demonstrating this approach (two tables, one last button disabled): Click here

How to disable last page button in primeNG datatable?

1 Answers