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

: 내가 마지막 페이지 버튼을 비활성화 할 수 있습니다 방법 ui-paginator-last

그것을 숨기거나 비활성화 OK입니다.

이제 매기기 보이는 같은 : |< < 1 2 3 4 5 > >|

Answer 1

당신은 이런 식으로 마지막 페이지 버튼을 숨기기 위해 CSS를 사용할 수 있습니다 .ui-paginator-last 이후

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

을 수행하여 사용할 수 없게 당신이 그것을 시뮬레이션 할 수 앵커 태그입니다 이 :

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

페이지 번호를 고유하게하려면 데이터 태그의 바닥 글에 추가 할 수 있습니다 수 그것에게주는 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입니다 (2 개의 테이블, 마지막 버튼은 비활성화 됨). Click here