在Angular5中为swimlane/ngx-datatable获取当前显示条数

Great question! I’ve worked with ngx-datatable in Angular projects before, and while the component doesn’t expose a ready-made displayCount variable in the footer template, you can easily calculate it using the existing template inputs you already have. This works across all versions of ngx-datatable that support custom footer templates (which includes the version compatible with Angular 5).

How to Calculate the Displayed Row Count #

The key is to use three variables already available in the footer template:

• offset: The starting index of the current page’s rows (e.g., 0 for page 1, 10 for page 2 with a page size of 10)
• pageSize: The number of rows set to show per page
• rowCount: Total number of rows in the entire table

The number of rows displayed on the current page can be calculated with:

Math.min(offset + pageSize, rowCount) - offset

This formula handles edge cases perfectly—like when the last page has fewer rows than the set page size (e.g., 25 total rows, page size 10: the last page shows 5 rows).

Implementation Steps #

1. Expose Math to your template (Angular templates block direct access to global objects by default):
   Add this line to your component class:

   public Math = Math;
   

2. Update your custom footer template to replace {{displayCount}} with the calculated value:

   <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 style="margin: 10px">
         <select class="form-control" style="width: 150px; font-size: 14px" (change)="onLimitChange($event.target.value)">
           <option *ngFor="let option of pageLimitOptions" [value]="option.value" [selected]="option.value == pageSize">
             {{ option.value }} per page
           </option>
         </select>
       </div>
       Showing {{ Math.min(offset + pageSize, rowCount) - offset }} of {{ rowCount.toLocaleString() }} total
       <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]="false" 
         (change)="table.onFooterPage($event)">
       </datatable-pager>
     </ng-template>
   </ngx-datatable-footer>
   

Alternative: Use a Component Getter (Optional) #

If you want cleaner template code, calculate the display count directly in your component class:

import { Component, ViewChild } from '@angular/core';
import { DatatableComponent } from '@swimlane/ngx-datatable';

@Component({
  // Your component metadata here
})
export class YourComponent {
  @ViewChild('table') table: DatatableComponent;
  
  get displayCount(): number {
    const offset = this.table.offset;
    const pageSize = this.table.pageSize;
    const rowCount = this.table.rowCount;
    return Math.min(offset + pageSize, rowCount) - offset;
  }
  
  public Math = Math;
  // Rest of your component logic
}

Then you can use {{displayCount}} in your template just like you originally planned.

Compatibility Note #

This approach works for all ngx-datatable versions that support custom footer templates (including the one paired with Angular 5). The offset, pageSize, and rowCount template variables have been part of the footer API for a long time, so you won’t hit version compatibility issues here.

内容的提问来源于stack exchange，提问作者kosmos