How to display the number of records present in particular page using ngx-pagination

问题

I am working on ngx-pagination, here i have to display the number of records present in that particular page. For example: if i have set items per page as 10, then in page number 1, it must show 1-10, if page number 2: it must show 11-20, if items per page is 50, then it must be 1-49, 50-99 and so on..

HTML:

 <pagination-controls (pageChange)="pageChanged($event)" class="my-pagination"></pagination-controls>

in table i am using pipe paginate, which links to ngx-pagination:

<tr  *ngFor="let agent of agentList | paginate: config)">

in Ts:

 public config = {
    itemsPerPage: 10,
    currentPage: 1,
    totalItems: 0
  };

Demo

here, if i am on page1, i need to show 1-10 are shown and so on

回答1:

Updated code into demo which you have added link see below code which I have updated in that stackblitz not able to share it.

In .ts file

  config: any;
  constructor() {
      this.config = {
      currentPage: 1,
      itemsPerPage: 10,
      totalItems:0
   };
 this.config.currentPage= 1;
  for (let i = 1; i <= 100; i++) {
      this.collection.push(`item ${i}`);
    }
  }

  public setItemsPerPage(event) {
      this.config.itemsPerPage = event
  }
  pageChange(event){
    this.config.currentPage = event;
  }

In Html

<ul>
    <li *ngFor="let item of collection | paginate: config">{{ item }}</li>
 </ul>
    <div class="col-auto">
                                    <select class="custom-select" (change)="setItemsPerPage(page.value)" #page>
                                        <option selected>10</option>
                                        <option>50</option>
                                        <option >100</option>
                                        <option >500</option>
                                    </select>
                                </div>

        <pagination-controls (pageChange)="pageChange($event)"></pagination-controls>

Hope this will help you

let me know if not work..

thanks

来源：https://stackoverflow.com/questions/59529695/how-to-display-the-number-of-records-present-in-particular-page-using-ngx-pagina

标签

angular

ngx-pagination