这段代码是关于ngx-bootstrap分页的。我想在这里面搜索项目。
<table class="table transactionhistory_table" id="myTable">
<thead>
<tr class="transactionhistory_table_tr">
<th>REFERENCE ID</th>
<th>RECHARGE AMOUNT</th>
<th>TOTAL AMOUNT</th>
<th>BOOKING TYPE</th>
<th>TRANSACTION TYPE</th>
<th>DATE</th>
<th>STATUS</th>
</tr>
</thead>
<tbody id="operatorName"*ngFor="let data of returnedArray | filter:filter">
<tr>
<td class="transactionhistory_table_tr_td">{{data.transactionId}}</td>
<td class="transactionhistory_table_tr_td">{{data.rechargeAmount}}</td>
<td class="transactionhistory_table_tr_td">{{data.walletAmount}}</td>
<td class="transactionhistory_table_tr_td">{{data.bookingType}}</td>
<td class="transactionhistory_table_tr_td">{{data.transactionType}</td>
<td class="transactionhistory_table_tr_td">{{data.createdDate}}</td>
<td class="transactionhistory_table_tr_td">{{data.transactionStatus}}</td>
</tr>
</tbody>
</table>
</div>
<div class="col-xs-12 col-12 no-padding">
<span class="pagination_class">
<p class="page_no">({{startVal}}-{{endVal}} of {{walletTransactionsCount}})</p>
<div class="pagination_class">
<!-- <pagination-controls previousText="‹" nextText="›" (pageChanged)="pageChanged(p=$event)"></pagination-controls> -->
<pagination [boundaryLinks]="true" [totalItems]="walletTransactionsCount" previousText="‹" nextText="›" firstText="«" lastText="»" (itemsPerPage)="3" (pageChanged)="pageChanged($event)" [maxSize]="5"></pagination>
</div>
</span>
</div>
我想用分页来过滤表格,我已经用了ng2searchpipe模块,但它只过滤一个TR,而不是所有数据。
pageChanged(event: PageChangedEvent): void {
event.itemsPerPage = 3;
const startItem = (event.page - 1) * event.itemsPerPage;
const endItem = event.page * event.itemsPerPage;
this.startVal = startItem + 1;
this.endVal = endItem;
this.returnedArray = this.walletTransaction.slice(startItem, endItem);
}
我使用了不同的方法来实现这一点。我没有使用传统的过滤管道,而是在搜索模型变化时实现了过滤方法,以过滤掉原始数组中的数据并存储在contentArray中。然后我调用pageChange方法来实现数据的分页。我的代码如下。
HTML:
<input type="text" placeholder="Search" [(ngModel)]="filterSearchData" (ngModelChange)="changeSearchFilter($event)" />
Componenet:
changeSearchFilter(filterText: string) {
this.contentArray= this.rawDataList.filter((dataItem: any) =>
dataItem.guestName.toLowerCase().includes(filterText.toLowerCase())
);
this.pageChanged({
page: 1,
itemsPerPage: this.pageItems
});
this.cd.detectChanges();
}
pageChanged(event: PageChangedEvent): void {
const startItem = (event.page - 1) * event.itemsPerPage;
const endItem = event.page * event.itemsPerPage;
this.returnedArray = this.contentArray.slice(startItem, endItem);
}