Issue with multiple paginators in loop

Hi,

Thanks for the awesome component. It is really helpful. I am facing issue in creating multiple paginators on single page. When I click the next button, it changes the page number for all instances. As per documentation, I am using unique id for each instance but facing same issue. Please find below code snippet. Here I am dynamically creating tables based based on “nodeName” received in first ngFor loop and then displaying data in each table (div) in each table in second ngFor loop. It displays the pagination for each table but on click of next button it moves to next page for all tables

I

<div style="display:inline-block;width:50%; padding-top:20px " *ngFor="let data of tabularData">
        <div class="">
          <div class="row dataFormatter">
            <div class="col-12 tabDataPadding dataheader">{{data.nodeName}}</div>
          </div>

          <div class="row table-bordered dataFormatter">
            <div class="col-4 tableBody tabDataPadding">Items</div>
            <div class="col-3 tableBody tabDataPadding">Value</div>
            <div class="col-5 tableBody tabDataPadding">Updated On</div>
          </div>
          <div class="row table-bordered dataFormatter" *ngFor="let tb of data.attributes | paginate: {id: data.nodeName, itemsPerPage:5 , currentPage:p }">
            <div class="col-4 tableBody tabDataPadding">{{tb.key}}</div>
            <div class="col-3 tableBody tabDataPadding">{{tb.value}}</div>
            <div style="font-size:0.9em" class="col-5 tabDataPadding tableBody">{{tb.date}}</div>
          </div>
          <pagination-controls id={{data.nodeName}} (pageChange)="p = $event"></pagination-controls>
    </div>
  </div>

=======

Angular version: 5.1.1

ngx-pagination version: 3.1

Description of issue:

Steps to reproduce:

Expected result:

Actual result:

[michaelbromley]

Thanks for the link. I see the problem now.

You have only a single, shared variable p representing the current page. Each instance of pagination is therefore updating this shared variable, which then affects all other instances.

The solution is to use a unique currentPage variable for each instance. One way to do it is like this:

p: { [id: string]: number} = {};

<div *ngFor="let tb of data.attributes | paginate: {id: data.nodeName, itemsPerPage:3 , currentPage: p[data.nodeName] }">

<pagination-controls [id]='data.nodeName' (pageChange)="p[data.nodeName] = $event"></pagination-controls>

See this updated demo.

[akshay-borase]

Thanks Micheal. I will check it out.