How can I give custom pagination for specific page?

171 views Asked by At

The code below is working. The requirement is to set custom number of records for 1st page based on currntWeekAb where all other pages should have fixed 50 records each.

For example, if the total number of employees is 210 and currntWeekAb equals 10, then below code shows 21 pages when I am on the 1st page and 5 pages on all other pages. This is because page 1 keeps 10 records and all other pages 50 records each. So the issue here is: I want to show the same number of pages on all pages, instead of having a different number of pages shown on page 1 compared to all other pages.

HTML:

<table #filteredTable mat-table class="mat-elevation-z8" id="table"> 
  <thead>
    <tr>
          <!-- TABLE HEADERs -->       
    </tr>
  </thead>
  <tbody *ngIf="employee ?.length > 0">  
    <tr *ngFor="let of employee | filter: SearchBtn | paginate: config; ; let i = index">
      
          <!-- TABLE RECORDS  -- >   

    </tr> 
  </tbody> 
</table>

<!-- pagination controls -->
<div class="pagination-container">
  <pagination-controls (pageChange)="onPageChange($event)" [id]="config.id" [directionLinks]="true"></pagination-controls>
</div>

TS:

export class TableComponent {
  // Array of data to be paginated
  employee: any[] = [];
  
  // Pagination settings
  config: PaginationInstance = {
    id: 'custom',
    itemsPerPage: 50,
    currentPage: 1,
    totalItems: this.absences.length
  };

  ngOnInit(): void {
     this.retrieveEmp();
  }
  
  // Update the current page when it changes
  onPageChange(pageNumber: number) {
    this.config.currentPage = pageNumber;
    this.config.itemsPerPage = this.config.currentPage === 1 ? this.currntWeekAb() : 50;
  }

 currntWeekAb(){ 
  const filteredAb = this.employee.filter(ab => {
    const startDate = moment(ab['ab_to']).format('YYYY-MM-DDTHH:mm');
    return startDate >= this.filFrom && startDate <= this.filTo || ab.ab_flag == true;
  });
  const totalLength = filteredAb.length;
  c(totalLength)
  return totalLength;
 }

 retrieveEmp():void{
    this.employeeService.getAll()
    .subscribe(
    info => {
      this.employee = info;

      this.config['itemsPerPage'] = this.currntWeekAb() 

    },
    error => {
      c(error);
    });
 }
}
0

There are 0 answers