CODEWITHSUNDEEP
angularngx-bootstrap
Tom
Tom

Reputation: 8681

Ngx-boostrap pagination not working as desired

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

Upvotes: 2

Views: 1765

Answers (3)

Emanuele Galeotti
Emanuele Galeotti

Reputation: 49

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.

Upvotes: 0

Ashot Aleqsanyan
Ashot Aleqsanyan

Reputation: 4453

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

}

Upvotes: 1

errorau
errorau

Reputation: 2334

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

Upvotes: 2

Related Questions