Search filter for all pages not working in Angular 8.

[shivangi53]

I am having the same issue. I have used ng2 search filter and ngx pagination in my HTML file of angular project. I am able to search within pages but not all pages. I have even put the filter first and then paginate but it's still not working. Can you please help me out of this?

Originally posted by @shivangi53 in https://github.com/michaelbromley/ngx-pagination/issues/178#issuecomment-696118195

[michaelbromley]

Hi. Please fill out the issue template:

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:

[shivangi53]

Hi. Please fill out the issue template:

Angular version: 9.0.7 Node : 12.7.0

ngx-pagination version:5.0.0

Description of issue: I have used ng2 search filter and ngx pagination but still I'm able to search within the pages and not in all pages. I am able to search the data of first page in first page only. The data of second page in second page only. But I'm not able to search the data of one page into another. If I do it the page comes empty.

Steps to reproduce:

HTML Code:

<tr *ngFor ="let game of games| filter :term| paginate: {itemsPerPage:5, currentPage:p}; let i = index" >
<td>{{game.name}}</td>
<td>{{game.genre}}</td>
</tr>
</tbody>
</table>
<pagination-controls directionLinks="true" (pageChange)="p = $event"></pagination-controls>

Expected result: I want the search to happen in all pages. Like if I search the data of first page from the third page then also the output should come. Instead of coming empty.

Actual result: The data of first page gets searched in the first only. The data of second page gets searched in the second only. And respectively for every page.

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

Any relevant code: HTML Code:

<tr *ngFor ="let game of games| filter :term| paginate: {itemsPerPage:5, currentPage:p}; let i = index" >
<td>{{game.name}}</td>
<td>{{game.genre}}</td>
</tr>
</tbody>
</table>
<pagination-controls directionLinks="true" (pageChange)="p = $event"></pagination-controls>

[shivangi53]

[michaelbromley]

Thanks for the info. By the way - if you want to show code, surround it in 3 back-ticks:

```
<div>....</div>
```

Since I don't know about the ng2 search filter library, I cannot know what exactly it does or how it interacts with this library to cause the issue. If you can reproduce the behaviour using this Stackblitz demo as the basis, then I can investigate further.

[AyushGupta838]

What have you done next?

[Ahsanbaloch]

Anyone find the solution?

[shivangi53]

The ng2 search filter didn't work fine for me. So instead I used filter keyword on the array to fetch the search item.

[Ahsanbaloch]

Thank you @shivangi53

[KGP8]

Anyone find the solution about ng2SearchFilter ?

[salehudeen]

I'm not sure how this will help, but I managed to solve the issue by placing my filter pipe before my pagination pipe like the below example: -

| filter :searchValue | paginate: { itemsPerPage:8, currentPage:page, totalItems:totalLength }

hope this helps its been buggin me for a while to be honest.

[PgStudy143]

Use totalItems: datasource.length in pagination