Ben Osborne Ben Osborne - 1 month ago 23
AngularJS Question

Angular - Adjust Pagination When Filtered

I'm new to Angular, so go easy on me.

My question is similar to this one. I'm doing something a little different, so the accepted answer isn't working for me.

I'm using Angular UI Bootstrap's Pagination directive to paginate a dataset, and I'm using Angular filters to allow users to filter data for any column.

The problem is that when the data is filtered, the user only sees the data on the page he's currently on.

$scope.applyFilter = function() {
var begin = (($scope.currentPage - 1) * $scope.itemsPerPage);
var end = begin + $scope.itemsPerPage;
$scope.totalItems = $filter('filter')($scope.items).length;
$scope.filteredItems = $filter('filter')($scope.items).slice(begin, end);
};


Here's the full Plunker

For example, if you key in a state of "GA" in the state filter (text box under the word "State"), no data is returned. However, you can select page 4 and see the one record that meets the condition.

What I would like to happen is for the pagination to automatically adjust, showing just one page of results with the correct record appearing to the user.

I know that there are other grid directives that already have this functionality, but I'd prefer to not completely abandon my current approach.

Answer

You forgot the parameter into your filters call

$scope.applyFilter = function() {
    var begin = (($scope.currentPage - 1) * $scope.itemsPerPage);
    var end = begin + $scope.itemsPerPage;
    $scope.totalItems = $filter('filter')($scope.items,  $scope.search).length;
    $scope.filteredItems = ($filter('filter')($scope.items, $scope.search)).slice(begin, end);
};