javascripthtmlpaginationangular6ngx-pagination

Pagination and filter by column at the same time Angular 6

How can I modify this code in order to obtain pagination and filter at the same time? The problem is that if I have 1000 rows in my table and I display them 50 per page, the filter by name will be applied only on 50 entries that are displayed.

<tr *ngFor="let user of usersList | paginate: { itemsPerPage: 50, currentPage: p } | filter: 'name' : searchString">
    <td>{{ user.name }}</td>
    <td>{{ user.email }}</td>
    <td>{{ user.office }}</td>
</tr>
<pagination-controls (pageChange)="p=$event" previousLabel="Previous" nextLabel="Next"></pagination-controls>

Thank you for your time!

Solution

  • Just modify this way:

    <tr *ngFor="let user of usersList | filter: 'name' : searchString | paginate: { itemsPerPage: 50, currentPage: p }; let i=index">