ngx-pagination id is not working

[anuraggupta816]

ngx-pagination is working fine single time but when I am using multiple times pagination not working. I am also trying with id approach but the same issue.

[michaelbromley]

Hi there,

I'll re-post the issue template so you have another chance to fill it out. It is in your interest to take the time to do so, as it makes it much easier for me to help you. Please reply with as much of the following filled out as you can:

=======

Angular version:

ngx-pagination version:

Description of issue:

Steps to reproduce:

Expected result:

Actual result:

Demo: (if possible, edit this StackBlitz demo and paste the link to your fork)

Any relevant code:

[anuraggupta816]

Angular version: 7.3.8

ngx-pagination version:4.0.0

Description of issue: ngx-pagination is not working if we use multiple times.

Steps to reproduce: you can use two times in single page .

[michaelbromley]

Can you please show me the code which reproduces the error? Otherwise I cannot help.

[anuraggupta816]

<table class="table table-bordered" id="dataTable" width="100%" cellspacing="0">
    <thead>
        <tr>
            <th>OrderId </th>
            <th>Customer Name </th>
            <th>Customer Email</th>
            <th>Rider Name </th>
            <th>Price</th>
            <th>Restauran<br>Rating</th>
            <th>Rider<br>Rating</th>
            <th>createdAt</th>
        </tr>
    </thead>
    <tfoot>
        <tr>
            <th>OrderId</th>
            <th>Customer Name </th>
            <th>Customer Email</th>
            <th>Rider Name </th>
            <th>Price</th>
            <th>Restauran<br>Rating</th>
            <th>Rider<br>Rating</th>
            <th>created</th>
        </tr>
    </tfoot>
    <tbody>
        <tr *ngFor="let restaurantItem of orderListResp | paginate: {  id: 'test',itemsPerPage: DefaultPageLimit, currentPage: currentPageNumber,totalItems: totalNumberOfPages }" id="tr_{{restaurantItem._id}}">
            <td class="textWidth">#{{restaurantItem.orderAuoIncrement}} </td>
            <td class="textWidth">{{restaurantItem.customerId.name | capitalize}} </td>
            <td>{{restaurantItem.customerId.email}}</td>
            <td><span *ngIf="restaurantItem.driverId && restaurantItem.driverId.firstName">
                {{restaurantItem.driverId.firstName | capitalize}}</span> </td>
            <td>{{restaurantItem.totalPrice | currency:'USD':true:'2.0' }}</td>
            <td><span *ngIf="restaurantItem.restauranRatingGivenbyCustomer&&
                                restaurantItem.restauranRatingGivenbyCustomer.rating">{{restaurantItem.restauranRatingGivenbyCustomer.rating}}</span>
            </td>
            <td><span *ngIf="restaurantItem.riderRatingGivenbyCustomer&&
                                restaurantItem.riderRatingGivenbyCustomer.rating">{{restaurantItem.riderRatingGivenbyCustomer.rating}}</span>
            </td>
            <td class="descriptionText">{{restaurantItem.createdAt | date:'medium'}}</td>
        </tr>
        <tr *ngIf="orderListResp && orderListResp.length==0">
            <td class="textAligncenter" colspan="8">No Data Found </td>

        </tr>
    </tbody>
</table>

<pagination-controls  id="orderPa_1 "(pageChange)="orderListPageChange(currentPageNumber=$event)"   previousLabel="" nextLabel=""    >
</pagination-controls>

DefaultPageLimit:12, totalNumberOfPages:12

[anuraggupta816]

why it showing second-page numbers?

[anuraggupta816]

I think it is a conflict with other pagination on the same page

[michaelbromley]

Thanks for posting the code. Small hint - surround code blocks with 3 back-ticks to get GitHub to format correctly (see here for more instructions). I did it for you this time.

So in your example I can only see a single pagination instance, with the ID "test", but then the controls component has the ID "orderPa_1". These 2 IDs are supposed to be the same in order to be linked to one another.

Also I just wanted to check whether you are doing server-side pagination? Because the code above is set up for server-side rather than client-side pagination, due to the use of the totalItems field being passed to the paginate pipe.

[anuraggupta816]

Thanks for replay but when i used id with pagination-controls tag following error occur .

[anuraggupta816]

Second example

        <th>Price</th>
        <th>Rider<br>Rating</th>
        <th>createdAt</th>
    </tr>
</thead>
<tfoot>
    <tr>
        <th>OrderId</th>
        <th>Image</th>
        <th>Item Name </th>
        <th>Category</th>
        <th>SubCategory </th>

        <th>Price</th>
        <th>Created At</th>
        <th>Status</th>
    </tr>
</tfoot>
<tbody>
    <tr *ngFor="let menuItem of menuListResp | paginate: { itemsPerPage: DefaultPageLimit, currentPage: currentMenuPageNumber,totalItems: totalMenuNumberOfPages }" id="tr_{{menuItem._id}}">
        <td class="textWidth">#{{menuItem.menuCardId}} </td>
        <td>
            <span *ngIf="menuItem.image && menuItem.image.length>0">
            <img src="{{menuItem.image[0]}}" class="maxWidth">
          </span>
        </td>
        <td class="textWidth">{{menuItem.itemName | capitalize}} </td>
        <td><span *ngIf="menuItem.category && menuItem.category.categoryName">
            {{menuItem.category.categoryName  | capitalize}}</span>

        </td>
        <td><span *ngIf="menuItem.subCategory && menuItem.subCategory.categoryName">
      {{menuItem.subCategory.categoryName  | capitalize}}</span> </td>
        <td>{{menuItem.price | currency:'USD':true:'2.0' }}</td>

        <td>
            {{menuItem.createdAt | date:'medium'}}
        </td>
        <td class="descriptionText">
            <div *ngIf="menuItem.isEnabled" class="td_button_div">
                <span class="btn btn-primary-green btn-user">Enabled</span>
            </div>
            <div *ngIf="!menuItem.isEnabled" class="td_button_div">
                <span class="btn btn-primary btn-user">Disabled</span>
            </div>

        </td>
    </tr>
    <tr *ngIf="menuListResp && menuListResp.length==0">
        <td class="textAligncenter" colspan="8">No Data Found </td>

    </tr>
</tbody>

OrderId	Image	Item Name	Category	SubCategory

it is working fine if I used once in a page

[anuraggupta816]

it is working fine if I used once on a page. you can check the output

[anuraggupta816]

totalItems : 12

[michaelbromley]

Ok. At this point I cannot tell from the information you are providing whether there is a genuine bug here or whether your use of the library is incorrect.

I must now require you to recreate the issue by editing this StackBlitz demo with a minimal reproduction in order to help you further.

(fork the demo, reproduce the error, save and share the result back to this thread)

[anuraggupta816]

Hi, I just add the id in (https://stackblitz.com/edit/angular-e1f9hq) same error occurs. You can check.

[michaelbromley]

(fork the demo, reproduce the error, save and share the result back to this thread)

[anuraggupta816]

https://stackblitz.com/edit/angular-tfee1t?file=app

[michaelbromley]

Thanks for the reproduction. Please see the instructions on how to use multiple instances of pagination. Follow the instructions closely and let me know if this resolves your issue: https://github.com/michaelbromley/ngx-pagination#multiple-instances