Reset Search: Pagination issue in tabset angular 4

Question

I have tabbed view with two tabs.

Each tab has tables with their own pagination going on.

I also have reset button atop of these tabs. I want to reset the page to page1 when I hit the reset button. However, its working for only the first tab. The second tab does nothing.

Is there a way to get the current selected tab's pagination and then resetting it to page1 when I click the reset button?

screenshot

We are using PaginationComponent of ngx-bootstrap.

I felt like the code was too long, too long to post it here. I wish I knew how to use plunker and stuff like others ... sorry. Anyway here's my github project, if its not too hard to clone :) It is in Feature/reset branch.

https://github.com/RamenSayami/pagination-app

I did a lil research and there were quiet a few other paginaiton implementations. But we are using this in our project. So I would like to know more on this...

Also let me know if there are anyother ways to achive this... We may have to consider changing our strategy if this doesnt working well.

Answer 1

I have the same issue. After some researching, I found that adding id would solve the issue

<tr *ngFor="let d of tableData | tableFilter : searchText | paginate: { id: '5', itemsPerPage: recordPerPage, currentPage: tblCurPage }">
<pagination-controls id="5" (pageChange)="tblCurPage = $event"></pagination-controls>

since as per the official tutorial, when multiple pagination injected in one component, it needs to configure id to let ngx identify each of them. And tabset in a sense combine multiple component into single one. That's why only one of the pagination works