Filtering and pagination is not working with ngxpagination template

Question

I have a custom pagination template implementation of ngx-pagination which works normally. However when I try to use a filter pipe with the pagination, the pagination breaks: the pagination controls remain the same as before the filter was applied, and the filtered data-set is not longer paginated (11 items appearing on screen instead of 10). The pagination controls are still visible at the bottom of the page when filtered, but do not affect the filtered data i.e. no page change.

Component HTML

<task-manager-record *ngFor="let record of filteredDraftRecords | draftFilter: draftFilterArg | paginate: getPaginationOptions(tabIndex); let i = index;" [record]="record"></oir-task-manager-record>
<div class="totalRecords">
    <label>Total </label>
    {{ (filteredDraftRecords | draftFilter:draftFilterArg)?.length }}
</div>
<pagination *ngIf="(filteredDraftRecords | draftFilter:draftFilterArg)?.length > getPaginationOptions(tabIndex).itemsPerPage"
          (pageChange)="onChangePage($event)"
          [options]="getPaginationOptions(tabIndex)">
</pagination>

Component ts

import { Component, OnInit } from '@angular/core';
import { RecordViewModel } from '../models/app.models';
import { MotionStatus } from '../models/enum.model';
import { PaginationOptions } from 'proceduralsystem-clientcomponents';
import { SelectItem } from '@motions/motions.model';
import { TaskManagerService } from './task-manager.service';

@Component({
  selector: 'task-manager',
  templateUrl: './task-manager.component.html',
  styleUrls: ['./task-manager.component.less']
})
export class TaskManagerComponent implements OnInit {

  draftrecords = new Array<RecordViewModel>();
  filteredDraftRecords = new Array<RecordViewModel>();

  motionStatus = MotionStatus;
  draftFilterArg = 0;
  tabIndex = 0;
  page: { [id: string]: number} = {};
  currentPage = 1;

  constructor(
    public taskManagerService: TaskManagerService
  ) {
  }

  ngOnInit(): void {
    this.loadDraftRecords();
  }

  loadDraftRecords(): void {
    this.taskManagerService.getDraftMotions().subscribe(m => {
    this.draftRecords = m.Records;
      this.filteredDraftRecords = this.draftRecords;
    });
  }


  // Pagination functions
  getPaginationOptions(tabIndex: number): PaginationOptions {
    const paginationId = `tab${tabIndex}`;

    return {
      id: 'tab',
      itemsPerPage: 10,
      currentPage: this.page[paginationId],
      totalItems: this.draftRecords.length
    };
  }

  onChangePage(pageNumber) {
    this.page[`tab${this.tabIndex}`] = pageNumber;
  }

}

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

@Pipe({
  name: 'draftFilter'
})
export class DraftFilterPipe implements PipeTransform {

  transform(value: any, args?: any): any {
    if(args) {
      return value.filter(item => item.status.id === args);
    } else {
      return value;
    }
  }
}

Edit: Added demo. The code is a little different, refactored to remove unneeded code. https://stackblitz.com/edit/angular-fnbnaw

can you create small demo code – Amit Golhar Feb 19 '19 at 10:46 — Amit Golhar, Feb 19 '19 at 10:46
@AmitGolhar Added a demo, thanks. – red_dorian Feb 19 '19 at 13:09 — red_dorian, Feb 19 '19 at 13:09

score 4 · Accepted Answer · answered Feb 22 '19 at 20:59

4

The seems some confusion about the 2 variables in App componnet, draftFilterArg, and tableindex. I've replaced tableindex with draftFilterArg. Also rewrote the getTabTotal function with the pipe function.

Also there's bug in Pagination component, "page n of lastpage" where the last page should be calling the getLastPage() function rather than the lastpage variable.

Check the result here: https://stackblitz.com/edit/angular-mcmpbe

answered Feb 22 '19 at 20:59

Haijin

2,561
2
17
30

Thanks @Haijin the tabIndex variable is for the larger app which uses p-tabView to switch between tabs, but I see what you mean about using draftFilterArg instead. I also see the bug you pointed out in the Pagination control. Thanks again. – red_dorian Feb 25 '19 at 11:32
Sorry, I meant to award the bounty earlier. I have awarded it there now. – red_dorian Mar 01 '19 at 10:40

Filtering and pagination is not working with ngxpagination template

1 Answers1