如何将过滤器添加到 ngx-bootstrap 分页?

Posted

技术标签:

【中文标题】如何将过滤器添加到 ngx-bootstrap 分页?【英文标题】:How to add filter to ngx- bootstrap pagination? 【发布时间】:2018-11-06 23:48:21 【问题描述】:

这段代码是关于 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="&lsaquo;" nextText="&rsaquo;" (pageChanged)="pageChanged(p=$event)"></pagination-controls>  -->
        <pagination [boundaryLinks]="true" [totalItems]="walletTransactionsCount"   previousText="&lsaquo;" nextText="&rsaquo;" firstText="&laquo;" lastText="&raquo;" (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);

【问题讨论】:

【参考方案1】:

我使用了不同的方法来实现这一点。我没有使用传统的过滤器管道,而是在搜索模型更改上实现了过滤器方法,以过滤掉原始数组中的数据并存储在 contentArray 中。然后我调用了 pageChange 方法来影响数据的分页。我的代码如下:

html

<input type="text" placeholder="Search" [(ngModel)]="filterSearchData" (ngModelChange)="changeSearchFilter($event)" />

组件:

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);
  

【讨论】:

以上是关于如何将过滤器添加到 ngx-bootstrap 分页?的主要内容,如果未能解决你的问题,请参考以下文章

找不到模块“ngx-bootstrap”

ngx-bootstrap bs-sortable 在将菜单项拖动到可排序部分时显示先前拖动的项目

如何使 ngx-bootstrap datepicker 只能选择和显示月份和年份?

如何使用标签和过滤器将页脚从 index.html 显示到所有 html 页面?

如何将多个userSellers添加到此过滤器?

Valor-software / ngx-bootstrap将一个组件放入动态创建的内容中