如何为ngx-bootstrap分页功能添加筛选功能？

Got it, let's fix this issue where your filter only works on the current page instead of all your transaction data. The core problem right now is that you're slicing the full dataset first for pagination, then applying the filter—so it only ever sees the current page's items. Here's how to adjust this properly:

Step 1: Adjust the Component Logic #

We need to filter the full dataset first, then handle pagination based on the filtered results. Let's update your component code:

// Add a new variable to hold all filtered transactions
filteredTransactions: any[] = [];
filter: string = ''; // Your search term variable

// Trigger filtering when the search input changes
onFilterChange() {
  // Filter the entire original dataset (replace with ng2searchpipe logic if you prefer)
  const searchTerm = this.filter.toLowerCase();
  this.filteredTransactions = this.walletTransaction.filter(item => {
    return item.transactionId.toLowerCase().includes(searchTerm) ||
           item.rechargeAmount.toString().includes(searchTerm) ||
           item.walletAmount.toString().includes(searchTerm) ||
           item.bookingType.toLowerCase().includes(searchTerm) ||
           item.transactionType.toLowerCase().includes(searchTerm) ||
           item.createdDate.toLowerCase().includes(searchTerm) ||
           item.transactionStatus.toLowerCase().includes(searchTerm);
  });
  // Reset pagination to the first page after filtering
  this.pageChanged({page: 1, itemsPerPage: 3});
}

pageChanged(event: PageChangedEvent): void {
  event.itemsPerPage = 3;
  const startItem = (event.page - 1) * event.itemsPerPage;
  const endItem = event.page * event.itemsPerPage;
  
  this.startVal = startItem + 1;
  // Make sure we don't exceed the filtered dataset length
  this.endVal = Math.min(endItem, this.filteredTransactions.length);
  
  // Slice from the filtered dataset instead of the original
  this.returnedArray = this.filteredTransactions.slice(startItem, endItem);
}

// Initialize with full dataset on component load
ngOnInit() {
  this.filteredTransactions = [...this.walletTransaction];
  this.pageChanged({page: 1, itemsPerPage: 3});
}

Step 2: Update the Template #

We'll add a search input, fix a syntax error in your template, and tie pagination to the filtered dataset:

<!-- Add a search input to trigger filtering -->
<div class="mb-3">
  <input 
    type="text" 
    [(ngModel)]="filter" 
    (input)="onFilterChange()" 
    placeholder="Search transactions by any field..."
    class="form-control"
  >
</div>

<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">
    <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>
      <!-- Fixed missing closing }} here -->
      <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 class="col-xs-12 col-12 no-padding">
  <span class="pagination_class">
    <!-- Update count to use filtered dataset length -->
    <p class="page_no">({{startVal}}-{{endVal}} of {{filteredTransactions.length}})</p>
    <div class="pagination_class">
      <pagination 
        [boundaryLinks]="true" 
        [totalItems]="filteredTransactions.length" 
        previousText="&lsaquo;" 
        nextText="&rsaquo;" 
        firstText="&laquo;" 
        lastText="&raquo;" 
        [itemsPerPage]="3" 
        (pageChanged)="pageChanged($event)" 
        [maxSize]="5">
      </pagination>
    </div>
  </span>
</div>

Why This Works #

• We now filter the entire original dataset first, so filteredTransactions contains all matching entries, not just the current page.
• Pagination logic uses the filtered dataset to calculate page ranges, so switching pages shows the correct filtered results.
• When the search term changes, we reset pagination to the first page to ensure users see the filtered results immediately.
• Fixed the missing closing }} in your template that would have caused a rendering error.

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