如何从分页继续表数

Question

我在表号中有问题，该数字不能在第2页中继续。在第1页中的5之后，我要在第2页中继续从5到6。我使用Angular 2。 < / p>

这是我的component.html，我只显示代码表

<div class="rap">

  <table align="center" class="table table-bordered">

    <tr>
      <th>No</th>
      <th [class.active]="order === 'employeeNumber'"
          (click)="setOrder('employeeNumber')" style="background-color: #165fa7">
        NRP
        <span [hidden]="reverse">▼</span><span [hidden]="!reverse">▲</span>
      </th>

      <th [class.active]="order === 'name'"
          (click)="setOrder('name')" style="background-color: #165fa7">
        Name
        <span [hidden]="reverse">▼</span><span [hidden]="!reverse">▲</span>
      </th>

      <th>Status</th>
      <th>Actions</th>
    </tr>
    <tr *ngFor="let inspector of allpagingData | filter:filter| orderBy: order:reverse:'case-insensitive'; let i = index">
      <td>{{i+1}}</td>
      <td>{{inspector.employeeNumber}}</td>
      <td>{{inspector.name}}</td>
      <td>{{inspector.isActive}}</td>
      <td align="center">
        <button type="button" class="btn btn-success ac" routerLink="/inspector/{{inspector.id}}" [routerLinkActive]="['router-link-active']"><i class="fa fa-edit"></i></button>
        <a class="cc"></a>
        <button type="button" class="btn btn-success bc" (click)="deleteInspectorIDs(inspector.id)"><i class="fa fa-trash"></i></button>
      </td>
    </tr>
  </table>

  <div align="center">
    <ul *ngIf="pager.pages && pager.pages.length" class="pagination">
      <li [ngClass]="{disabled:pager.currentPage === 1}">
        <a (click)="getDataPage(pager.currentPage - 1)">Previous</a>
      </li>
      <li *ngFor="let page of pager.pages" [ngClass]="{active:pager.currentPage === page}">
        <a (click)="getDataPage(page)">{{page}}</a>
      </li>
      <li [ngClass]="{disabled:pager.currentPage === pager.totalPages}">
        <a (click)="getDataPage(pager.currentPage + 1)">Next</a>
      </li>
    </ul>
  </div>

  <div align="center">
    <button (click)="getcsvFile()" class="btn btn-success">Download</button>
  </div>

</div>

如何继续表的数量？

Answer 1

您可以使用寻呼机的currentPage变量来计算当前的序列号。本示例假定您的页面大小为5。您可以根据需要将其替换为动态页面大小。

   <tr *ngFor="let inspector of allpagingData | filter:filter| orderBy: order:reverse:'case-insensitive'; let i = index">
      <td>{{((pager.currentPage - 1)*5) + i}}</td>
      <td>{{inspector.employeeNumber}}</td>
      <td>{{inspector.name}}</td>
      <td>{{inspector.isActive}}</td>
      <td align="center">
        <button type="button" class="btn btn-success ac" routerLink="/inspector/{{inspector.id}}" [routerLinkActive]="['router-link-active']"><i class="fa fa-edit"></i></button>
        <a class="cc"></a>
        <button type="button" class="btn btn-success bc" (click)="deleteInspectorIDs(inspector.id)"><i class="fa fa-trash"></i></button>
      </td>
    </tr>