ngx-datatable에서 페이지 매김과 바닥 글 템플릿을 추가하는 방법은 무엇입니까? 내가 다음 HTML 코드를

Question

는

다음과 같은 결과가

<ngx-datatable 
    class="material" 
    [rows]="rows" 
    [columns]="[{name:'Name'},{name:'Age'},{name:'Company'}]" 
    [columnMode]="'force'" 
    [headerHeight]="50" 
    [footerHeight]="50" 
    [rowHeight]="'auto'" 
    [externalPaging]="true" 
    [count]="page.totalElements" 
    [offset]="page.pageNumber" 
    [limit]="page.size" 
    (page)='getValue($event)' 
    [selected]="selected" 
    [selectionType]="'checkbox'" 
    (activate)="onActivate($event)" 
    (select)='onSelect($event)' > 
    <ngx-datatable-column 
    [width]="30" 
    [sortable]="false" 
    [canAutoResize]="false" 
    [draggable]="false" 
    [resizeable]="false" 
    [headerCheckboxable]="true" 
    [checkboxable]="true"> 
    </ngx-datatable-column> 
    <ngx-datatable-column name="Name"> 
     <ng-template let-row="row" let-value="value" ngx-datatable-cell-template> 
     {{value}} <i [innerHTML]="row['age']"></i> years old 
     </ng-template> 
    </ngx-datatable-column> 
    <ngx-datatable-column name="Age"> 
     <ng-template let-column="column" ngx-datatable-header-template> 
      Combined Properties 
      </ng-template> 

     <ng-template let-row="row" let-value="value" ngx-datatable-cell-template> 
      <div style="border:solid 1px #ddd;margin:5px;padding:3px"> 
       <div style="background:#999;height:10px" [style.width]="value + '%'"></div> 
       {{row['name']}}, passed their life of {{value}}% 
       </div> 
     </ng-template> 
    </ngx-datatable-column> 
    <ngx-datatable-column name="Company"> 
     <ng-template let-value="value" ngx-datatable-cell-template> 
      {{value}} 
     </ng-template> 
    </ngx-datatable-column> 
    <ngx-datatable-footer> 
     <ng-template 
     ngx-datatable-footer-template 
     let-rowCount="rowCount" 
     let-pageSize="pageSize" 
     let-selectedCount="selectedCount" 
     let-curPage="curPage" 
     let-offset="offset"> 
     <div style="padding: 5px 10px"> 
      <div> 
      Rows: {{rowCount}} | 
      Size: {{pageSize}} | 
      Current: {{curPage}} | 
      Offset: {{offset}} | 
      Selected: {{selectedCount}} 
      </div> 
     </div> 
     </ng-template> 
    </ngx-datatable-footer> 
</ngx-datatable> 

, Server Pagination without Paged

것은 내가 위에서 내가 아래의 결과를 얻었다 코드를 언급에 <ngx-datatable-footer> ... </ngx-datatable-footer>을 제거하면

Server Pagination with Paged

내 표에 페이지 매김 및 바닥 글 템플릿이 모두 필요합니다.

내 코드가 다른 점은 무엇입니까?

Answer 1

ngx-datatable-footer-template에 구성 요소를 추가해야합니다. check the code of footer component 인 경우 바닥 글 템플릿이 정의되지 않은 경우에만 기본 호출기가 존재 함을 알 수 있습니다.

You can check this demo 사용자 정의 바닥 글 템플릿에서 호출기를 추가하는 방법을 확인하십시오.

<ngx-datatable-footer> 
    <ng-template 
    ngx-datatable-footer-template 
    let-rowCount="rowCount" 
    let-pageSize="pageSize" 
    let-selectedCount="selectedCount" 
    let-curPage="curPage" 
    let-offset="offset" 
    let-isVisible="isVisible"> 
     <div class="page-count"> 
     <span *ngIf="selectedMessage"> 
      {{selectedCount.toLocaleString()}} {{selectedMessage}}/
     </span> 
     {{rowCount.toLocaleString()}} {{totalMessage}} 
     </div> 
     <datatable-pager 
      [pagerLeftArrowIcon]="'datatable-icon-left'" 
      [pagerRightArrowIcon]="'datatable-icon-right'" 
      [pagerPreviousIcon]="'datatable-icon-prev'" 
      [pagerNextIcon]="'datatable-icon-skip'" 
      [page]="curPage" 
      [size]="pageSize" 
      [count]="rowCount" 
      [hidden]="!((rowCount/pageSize) > 1)" 
      (change)="table.onFooterPage($event)"> 
     </datatable-pager> 
    </ng-template> 
</ngx-datatable-footer>