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);
});
}
}