1

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);
    });
 }
}
nyla L
  • 57
  • 6
  • I think you can achieve that by listening to the `pageChange ` event handler and updating the page config dynamically. so basically you can show the more records based on `currntWeekAb ` and then when you switch to next page, update the `itemsPerPage` – dreamweiver Mar 22 '23 at 09:55
  • Hi @dreamweiver thats the way I have already done in above code. but its giving the different amount of numbers when I am on 2nd page comapre to 1st. – nyla L Mar 22 '23 at 10:02

0 Answers0