0

I am using custom filters and ngx-pagination on my JSON data. The problem here is when I am filtering the data my pagination control is not getting updated, still showing the old page size and allowing pagination even if the data is not available. Please suggest.

Right now, it has 21 results without any filter applied Right now, it has 21 results without any filter applied

Now, I have applied filters n now it's showing only 1 record but pagination is still showing 5 pages (considering 5 per page size).

enter image description here

table-filter.pipe.ts

import { Pipe, PipeTransform } from "@angular/core";

@Pipe({
  name: "tableFilter"
})
export class TableFilterPipe implements PipeTransform {
  transform(list: any[], filters: any) {
    const keys = Object.keys(filters).filter(key => filters[key]);
    const filterUser = (user: { [x: string]: any; }) =>
      keys.every(key => {
        if (key == "sdob") {
          return new Date(user["dob"]) >= new Date(filters[key]);
        } else if (key == "edob") {
          return new Date(filters[key]) >= new Date(user["dob"]);
        } else {
          return user[key] === filters[key];
        }
      });
    return keys.length ? list.filter(filterUser) : list;
  }
}

app.component.html

<table class="table table-sm table-responsive">
      <thead>
        <tr>
          <th></th>
          <th>First Name</th>
          <th>Last Name</th>
          <th>Email</th>
          <th>Gender</th>
          <th>DOB (mm/dd/yyyy)</th>
          <th>Impact</th>
          <th>Score</th>
          <th></th>
        </tr>
      </thead>
      <tbody>
        <tr class="record-row" (click)="viewUser(user)" *ngFor="let user of allUser | tableFilter: form.value | paginate: { id: 'listing_pagination', itemsPerPage: 5, currentPage: page, totalItems: totalRecords }">
          <td><input *ngIf="!isEdit" [(ngModel)]="user.checked" type="checkbox" (change)="checkboxClicked()"></td>
          <td>{{user.first_name}}</td>
          <td>{{user.last_name}}</td>
          <td>{{user.email}}</td>
          <td>{{user.gender}}</td>
          <td>{{user.dob}}</td>
          <td>{{user.impact}}</td>
          <td>
            <div [ngClass]="getClass(user)">{{user.score}}</div>
          </td>
          <td>
            <button *ngIf="!isEdit" class="btn btn-primary btn-sm" (click)="editUser(user)">Edit</button>
            <button class="btn btn-primary btn-sm btn-sm ml-2" (click)="deleteUser(user)">Delete</button>
          </td>
        </tr>
      </tbody>
    </table>
    <pagination-controls id="listing_pagination" directionLinks="true" (pageChange)="page = $event"></pagination-controls>
Kunal Vijan
  • 425
  • 2
  • 9
  • 28
  • 1
    try not to pass `totalItems: totalRecords` to paginate in *ngFor, Or just keep `paginate: { itemsPerPage: 5, currentPage: page }` – Luay AL-Assadi Dec 22 '20 at 13:24
  • @LuayAL-Assadi thanks I wanted to update the total count as well once the filter as that one still shows the total count instead of updated once the filter applied. `getLatestUser() { this.commonService.getAllUser().subscribe((response) => { this.allUser = response; this.totalRecords = this.allUser.length; this.getApplicableCounts(); this.allUser.forEach((row: any) => row.checked = false); }); }` `Total: {{totalRecords}}` – Kunal Vijan Dec 22 '20 at 14:01
  • @KunalVijan - Can you show me the complete component.ts code for the pagination and paging search. I'm interested too. Thanks – Ayobamilaye Mar 03 '23 at 11:00

0 Answers0