Ngx-boostrap pagination not working as desired

user_4607841 0
Viewed 1195

I have tried to implement pagination from ngx-bootstrap in my angular 10 application. Currently the number of records are 93 and it shows 93 records per page and 10 pages in total and displaying 5 pages at a time. Displaying 5 pages at a time is correct because maxsize is set to 5. Not sure what is gone wrong itemsperpage as I have set that to 5 but it is showing all 93

 <div *ngIf="customerDetails">
        <table id="customerdetails-table" class="table table-bordered table-striped">
          <thead>
            <th>Customer</th>
            <th>Company Name</th>
            <th>Contact Name</th>
            <th>Address</th>
            <th>City</th>
            <th>Postal Code</th>
            <th>Country</th>
            <th>Phone</th>
            <th>View Order</th>
          </thead>
          <tbody>
            <tr *ngFor="let custDetails of customerDetails">
              <td>{{custDetails.customerId}}</td>
              <td>{{custDetails.companyName}}</td>
              <td>{{custDetails.contactName}}</td>
              <td>{{custDetails.address}}</td>
              <td>{{custDetails.city}}</td>
              <td>{{custDetails.postalCode}}</td>
              <td>{{custDetails.country}}</td>
              <td>{{custDetails.phone}}</td>
              <td>{{custDetails.customerId}}</td>
            </tr>
          </tbody>
        </table>
        <pagination [totalItems]="totalItems" [itemsPerPage] = "5"  [maxSize]="maxSize" ></pagination>

      </div>

Component

 totalItems: number;
  maxSize = 5;

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

  getCustomerDetails(): void {
    this.customerDetailsService.getCustomerDetails()
      .subscribe(  data => { this.customerDetails =  data;
                             this.totalItems = data.length;
      }
    );
  }
ngx-bootstrap angular
3 Answers

You can use a pipe like as below

PaginationPipePipe

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

@Pipe({
  name: 'paginationPipe'
})
export class PaginationPipePipe implements PipeTransform {
  transform(value: any[], currentPage:number,perpage:number): any {
    let result =  value.filter((curr,index)=>{
      return index >= (currentPage-1)*perpage && index < currentPage *perpage
    }); 
    return result;
  }
}

In html use pipeline like that,

<tr *ngFor="let custDetails of (customerDetails | paginationPipe:currentPage:itemsPerPage)">

Then give an event to pagination as below

<pagination [totalItems]="customerDetails.length" (pageChanged)="pageChanged($event)" [itemsPerPage] = "5"  [maxSize]="5" ></pagination>

In component change the current index that you send to the pipe

 pageChanged(event:any) {
   this.currentPage = event.page;
}

Demo is here

user_60524270

look you need to have another property for store the current index of the page. something like this.

and every time loop from (currentPage - 1) * itemsPerPage to currentPage * itemsPerPage

Template

 <div *ngIf="customerDetails">
        <table id="customerdetails-table" class="table table-bordered table-striped">
          <thead>
            <th>Customer</th>
            <th>Company Name</th>
            <th>Contact Name</th>
            <th>Address</th>
            <th>City</th>
            <th>Postal Code</th>
            <th>Country</th>
            <th>Phone</th>
            <th>View Order</th>
          </thead>
          <tbody>
            <tr *ngFor="let custDetails of currentPageCustomers">
              <td>{{custDetails.customerId}}</td>
              <td>{{custDetails.companyName}}</td>
              <td>{{custDetails.contactName}}</td>
              <td>{{custDetails.address}}</td>
              <td>{{custDetails.city}}</td>
              <td>{{custDetails.postalCode}}</td>
              <td>{{custDetails.country}}</td>
              <td>{{custDetails.phone}}</td>
              <td>{{custDetails.customerId}}</td>
            </tr>
          </tbody>
        </table>
        <pagination 
           [currentPage]="currentPage"
           (pageChange)="pageChanged($event)"
           [totalItems]="totalItems" 
           [itemsPerPage] = "itemsPerPage"  
           [maxSize]="maxSize">
        </pagination>

</div>

Component

 currentPage = 1;
 itemsPerPage = 5;
 totalItems: number;
 maxSize = 5;
 currentPageCustomers = [];

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

  getCustomerDetails(): void {
    this.customerDetailsService
      .getCustomerDetails()
      .subscribe(data => { 
         this.customerDetails = data;
         this.totalItems = data.length;
         if(this.totalItems) {
            // call pageChanged function for define currentPageCustomers property 
            pageChanged(1);
         }
      }
    );
  }

pageChanged(currentPageIndex: number) {
   // currentPageIndex starts at 1
   this.currentPage = currentPageIndex;
   // for example in case of currentPage = 1;
   // the code will be slice from (1 - 1) * 5 to 1 * 5
   // from 0 to 5
   this.currentPageCustomers = this.customerDetails
      .slice(
         (this.currentPage - 1) * this.itemsPerPage,
         this.currentPage * this.itemsPerPage
      );

}
user_117691640

You have all the elements on the page because this component does not divide your list of elements, that is your or the server's job. This component only manages the display and pagination status.

user_117252820
Related