我在表号中有问题,该数字不能在第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>
如何继续表的数量?
答案 0 :(得分: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>