ng2-Pagination issue when pagination used for multiple html bootstrap tables on same page

[vijender1256]

I have two bootstrap tables on the same page and one table is in the main component and other is in the child component, I used declarations in the Module as follows :

import { NgModule }       from "@angular/core";
import { CommonModule }   from "@angular/common";
import { CashierRiskProfileComponent }    from "./cashierriskprofile.component";
import { CashierRiskProfileService }   from "./cashierriskprofile.service";
import { CashierRiskProfileRouting } from "./cashierriskprofile.routing";
import { SharedModule } from "../shared/shared.module";
import {PaginationControlsCmp, PaginatePipe, PaginationService} from "ng2-pagination";
import { GenericExceptionComponent }      from "../shared/genericcomponents/genericexception.component";

@NgModule({
    imports: [
        CommonModule,
        SharedModule,
        CashierRiskProfileRouting
    ],
    declarations: [
        PaginationControlsCmp, PaginatePipe, CashierRiskProfileComponent, GenericExceptionComponent
    ],
    providers: [
        PaginationService, CashierRiskProfileService
    ]
})
export class CashierRiskProfileModule { }

//Parent Component 
import { Component, OnInit, Output, EventEmitter, ViewChild} from "@angular/core";
import { CashierRiskProfileService}   from "./cashierriskprofile.service";
import { ICashierRiskProfile, ICashierExceptionDetails } from "../shared/interfaces";

@Component({
    selector: "cashierriskprofile",
    templateUrl: "build/app/CashierRiskProfile/cashierriskprofile.component.html"
    //,directives: [PaginationControlsCmp] --> used to use this in RC 5 and it worked fine but in RC 6 they got deprecated and it is causing isolation issues between parent and child
    //,pipes: [PaginatePipe]
    //,providers: [PaginationService]
})
export class CashierRiskProfileComponent implements OnInit {
    cashierRiskProfiles: ICashierRiskProfile[] = [];
    cashierExceptionDetails: ICashierExceptionDetails[];
    pageNumber: number = 1;

    constructor(private sorter: Sorter,
        private service: CashierRiskProfileService) { }

    ngOnInit() {
        this.filterText = "Filter Exceptions:";
        this.service.getCashierRiskProfiles()
            .then((cashierRiskProfiles: ICashierRiskProfile[]) => {
                this.cashierRiskProfiles  = cashierRiskProfiles;
            });
       }
    rowClicked(rowIndex: number, cashierRiskProfiles: any) {
        this.rowSelectedIndex = rowIndex;
        this.service.getCashierExceptionDetails("201")
            .then((exceptionDetails: ICashierExceptionDetails[]) => {
                this.cashierExceptionDetails = exceptionDetails;
            });
    }
   ngOnDestroy() {
    }
}

//Child Component
import { ChangeDetectionStrategy, Component, Input, OnInit } from "@angular/core";
import {ICashierExceptionDetails} from "../interfaces";

@Component({
    selector: "genericexception-details",
    templateUrl: "build/app/shared/genericcomponents/genericexception.component.html"
  //,directives: [PaginationControlsCmp] --> used to use this in RC 5 and it worked fine but in RC 6 they got deprecated and it is causing isolation issues between parent and child
    //,pipes: [PaginatePipe]
    //,providers: [PaginationService]
})
// this is exception
export class GenericExceptionComponent {
    @Input() cashierExceptions: ICashierExceptionDetails[];
}

//Parent Component HTML

 <div class="col-md-12 " style="margin-top: 15px;">
        <table class="exceptionHighlight table table-bordered table-responsive">
            <thead>
                <tr>
                    <th><strong>Store</strong></th>
                    <th><strong>Cashier</strong></th>
                    <th><strong>Service</strong></th>
                 </tr>
            </thead>
            <tbody>
                <tr *ngFor="let cashier of filteredcashierRiskProfiles | paginate: { itemsPerPage: 5, currentPage: p }  ;let rowIdx=index">
                    <td>{{cashier.storeId}}</td>
                    <td>{{cashier.cashierId}}</td>
                    <td>{{cashier.service}}</td>
                  </tr>
            </tbody>
        </table>
        <pagination-controls class="custom-pagination" (pageChange)="p = $event;rowSelectedIndex=-1"></pagination-controls>
    </div>
**//Dependent paging is occuring with parent and child only when I use ngIf, if i remove ngIf and load the //data directly I dont get this issue**
<div *ngIf="cashierExceptionDetails">
<div>
 <genericexception-details [cashierExceptions]="cashierExceptionDetails"></genericexception-details>
</div>
</div>

//Child Component HTML

<div class="col-md-12" style="margin-top: 15px;">
    <table class="table table-responsive table-bordered">
        <thead>
            <tr>
                <th><strong>Exception Category</strong></th>
                <th><strong>Amount</strong></th>
                <th><strong>Occurance</strong></th>
             </tr>
        </thead>
        <tbody>
            <tr *ngFor="let exception of cashierExceptions | paginate: { itemsPerPage: 1, currentPage: paging }; ">
                <td>{{exception.exceptionCategory}}</td>
                <td>{{exception.amount}}</td>
                <td>{{exception.occurence}}</td>
             </tr>
        </tbody>
    </table>
    <pagination-controls (pageChange)="paging = $event"></pagination-controls>
</div>

Above CashierRiskProfileComponent is parent component and inside its html used GenericExceptionComponent selector which is child component and both have bootstrap tables with pagination. The problem here is isolation of pagination between two grids, when one table page is change it is also changing page for child component table and vice versa. I tried to put that paginationControlsCmp , PaginatePipe in sharedModule but no use. I think this needs to be fixed ?

Note : This is not a support question as it seems to be isolation issue with ng2-pagination using Angular 2 RC 6, in RC 5 it used to work just fine since I used to use directives, Pipes in the individual components and it just worked fine since there is no common module that is sharing this pagination types, but in RC 6 directives, pipes are deprecated I can no longer use them in components but can only use at the module level which is causing isolation issues with pagination on two components on same page

Imp : \ Dependent paging is occuring with parent and child only when I use ngIf, if i remove ngIf and load the data directly I dont get this issue**

[michaelbromley]

Can you test this again in the latest version (0.4.1)? I just updated to work with rc.6 (see readme).

Let me know if it is fixed or not.

[vijender1256]

@michaelbromley No its not fixing it, if i use *ngIf like in the above code i mentioned to child component to hide and show, it is having isolation issues:

If i use [hidden] instead of *ngIf pagination works fine

eg:

<div *ngIf="cashierExceptionDetails">
<div>
 <genericexception-details [cashierExceptions]="cashierExceptionDetails"></genericexception-details>
</div>
</div>

Above code *ngIf, it is causing issue with pagination, when child component page is change parent component page is also changed/effected

If i change that to [hidden] , paginations works independently and it just fine

<div [hidden]="!cashierExceptionDetails">
<div>
 <genericexception-details [cashierExceptions]="cashierExceptionDetails"></genericexception-details>
</div>
</div>

[lgarro]

Im having the same issue with two pagination control instances. Using ngif. If I click on next page it trigger the other instance.

Im using : Angular 2.0.0 final release

Thanks for any help

[vijender1256]

Instead of ngIf* i used [hidden] and it works fine. there a problem with ngIF with pagination and I did not hear anything back from anyone

[michaelbromley]

Thanks for following up with more info. I'll look into this next week.

[lgarro]

How would this work for angular 2 since we dont have ngShow. We can use only ngIf or hidden directive @vijender1256 Thanks

[vijender1256]

@lgarro UR correct its [hidden] that's what I used

[LUS1N]

Hi, I also have an issue with multiple tables on one page.

It's not as most people have here, when changing pages on one table, others don't change, but when changing pages on one table after changing something on the other, it acts weird, jumps over multiple pages, or doesn't move to a different page, unless I click on the page number and not the arrow.

[lgarro]

@vijender1256

I have this on one component which holds the tabs and they have an ngcontent

<div [hidden]="!show" [class.video-courses]="extraClass" class="feature-film panes" style="display:block;">
                  <!-- NG for here with the info of each of the feature films -->

                  <ng-content select="[firstTab]"></ng-content>
                </div>
                <!--Feature Films-->

                <!--Short Films-->
                <div [hidden]="show" [class.video-classes]="extraClass" class="short-film panes" style="display:block;">
                  <div class="ju-row">
                    <ng-content select="[secondTab]"></ng-content>
                  </div>

                </div>

Then on the other component I have the pagination controls like this :

<div firstTab>
        <app-large-video-card *ngFor="let f of featureFilms| paginate: { id: 'largepagination',itemsPerPage: itemsPerPage, currentPage: p}" [film]="f" [type]='"film"'>
        </app-large-video-card>
        <div class="ju-row">
            <div class="ju-col-lg-24of24 ju-col-md-24of24 ju-col-ms-24of24 ju-col-xs-24of24">
                <div class="more-btn">
                    <pagination-controls onClick="window.scrollTo(0,0);" id="largepagination" (pageChange)="p = $event" #largepagination></pagination-controls>
                </div>
            </div>
        </div>
    </div>
    <div secondTab>
        <app-small-video-card *ngFor="let f of shortFilms| paginate: { id: 'shortpagination',itemsPerPage: itemsPerPage, currentPage: p}" [film]="f" [type]='"short"'></app-small-video-card>
        <div class="ju-row">
            <div class="ju-col-lg-24of24 ju-col-md-24of24 ju-col-ms-24of24 ju-col-xs-24of24">
                <div class="more-btn">
                    <pagination-controls onClick="window.scrollTo(0,0);" id="shortpagination" (pageChange)="p = $event" #shortpagination></pagination-controls>
                </div>
            </div>
        </div>
    </div>

Do you see any issues there , on why one pagination click will trigger the other one if they have different ids .

Thanks

Edit: sorry for the above formatting code tag not working correctly

[michaelbromley]

@lgarro I took the liberty of formatting your code. Read this short help page to find out how to do it properly.

Regarding the issue itself, I will take a look later in the week. I am pretty sure there is a real bug here, but I don't have time to investigate right now.

[michaelbromley]

Okay, I've looked into this a bit but cannot reproduce it.

@lgarro the problem with your code is that you are using the same currentPage variable for both instances.

@vijender1256 I attempted to reproduce your issue here: http://plnkr.co/edit/9cMKPK6fxHPnKRTaXTEQ?p=preview - as you can see it works okay. Please try to reproduce the issue, or else I cannot help further I'm afraid.

[lgarro]

Thanks @michaelbromley that worked in my case .

[vijender1256]

@michaelbromley Thank you it is working now, earlier i Used to import PaginatePipe, PaginationControlsCmp, PaginationService individually instead of Ng2PaginationModule, after i imported complete module it working without any problem, appreciate the help :)

[aajayagrahari]

@vijender1256 you need to change the current page name then it will works