I'm running into some issues with getting the paging feature to work properly while applying filters.
Currently, when the filters are active, the paging numbers do not display correctly and only filter the first page of results. What I'm aiming for is:
- considering all items initially
- applying text and category filters
- ordering the filtered results
- showing only the current page of results
- updating the page number to reflect the correct number of pages based on the applied filters
This is the ng-repeat statement I am utilizing:
item in items |
filter: { name: filters.name, category: filters.category } |
orderBy: predicate: reverse |
startFrom: currentPage * pageSize |
limitTo: pageSize
And here is the full HTML code:
<table class="table table-striped">
<thead>
<tr>
<th><a href="" ng-click="predicate='id';reverse=!reverse">#</a></th>
<th><a href="" ng-click="predicate='name';reverse=!reverse">Name</a></th>
<th><a href="" ng-click="predicate='category';reverse=!reverse">Category</a></th>
<th><a href="" ng-click="predicate='date';reverse=!reverse">Date</a></th>
</tr>
</thead>
<tbody>
<tr ng-repeat="item in items | filter:{name:filters.name,category:filters.category} | orderBy:predicate:reverse | startFrom:currentPage*pageSize | limitTo:pageSize">
<td>{{ item.id || 'None' }}</td>
<td>{{ item.name || 'None' }}</td>
<td>{{ item.category || 'None' }}</td>
<td>{{ item.date || 'None' }}</td>
</tr>
</tbody>
</table>
<pagination total-items="totalItems" ng-model="currentPage"></pagination>
This is the custom startFrom filter I've created to handle pagination:
.filter('startFrom', function () {
return function (input, start) {
return input.slice(start);
};
});
You can view a live demonstration here: