Update pagination in AngularJS after filtering

Question

I already have the pagination implemented. Now I want the pagination to be updated after filtering my results.

The form:

<input type="text" data-ng-model="search.name" data-ng-change="filter()"/>

The list:

<li data-ng-repeat="data in filtered = (list | filter:search) | filter:search | startFrom:(currentPage-1)*entryLimit | limitTo:entryLimit">{{data.name}}</li>

The pagination:

<pagination data-boundary-links="true" data-num-pages="noOfPages" data-current-page="currentPage" max-size="maxSize"></pagination>

The controller:

$scope.filter = function() {
    window.setTimeout(function() { //wait for 'filtered' to be changed
        $scope.noOfPages = Math.ceil($scope.filtered.length/$scope.entryLimit);
        $scope.setPage = function(pageNo) {
            $scope.currentPage = pageNo;
        };
    }, 10);
};

My problem is, the pagination is just updated after clicking on a page number or after entering the next character into the input field. So it is update one step to late.

EDIT: I added the source to jsFiddle: http://jsfiddle.net/eqCWL/2/

nackjicholson · Accepted Answer · 2013-12-20 07:12:35Z

36

@abject_error 's answer using $timeout does work. I edited your fiddle with his suggestion and made this jsFiddle

CAVEAT

I think the solution is indicative of a bigger problem in the form of a race condition!

jsFiddle using filterFilter and $watch

and that fiddle is the way around it for reals.

And here is the explanation

Your race condition is between handling the change of search and the availability of $scope.filtered.

I think the culprits to eliminate in order to resolve this race condition are:

ng-model="search" ng-change="filter()"

and

ng-repeat="data in filtered = (list | filter:search)......."

Using ng-change to fire off "filter()" to do the calculation of noOfPages but also depending on a change in search in order to create filtered. Doing it this way, ensures the filtered list cannot possibly be ready in time to calculate the number of pages, and that's why hobbling "filter()" by 10ms with a timeout gives you the illusion of a working program.

What you need is a way to "watch" search for changes, and then filter the list in a place where you have access to both creating $scope.filtered and calculating $scope.noOfPages. All in sequence, without a race.

Angular has that way! It is possible to use the filter filter in your controller as function very poorly named: filterFilter. Check this out in the Filters Guide - Using filters in controllers and services

Inject it into the controller.

function pageCtrl($scope, filterFilter) {
    // ...
}

Use it in a $watch function, documented in the scopes docs

$scope.$watch('search', function(term) {  
    // Create filtered 
    $scope.filtered = filterFilter($scope.list, term);  

    // Then calculate noOfPages
    $scope.noOfPages = Math.ceil($scope.filtered.length/$scope.entryLimit);  
})

Change the template to reflect our new way. No more in DOM filter, or ng-change

<input type="text" ng-model="search" placeholder="Search"/>

and

<li ng-repeat="data in filtered | startFrom:(currentPage-1)*entryLimit | limitTo:entryLimit">
    {{data.name}}
</li>

answered Dec 20, 2013 at 7:12

nackjicholson

4,8594 gold badges40 silver badges36 bronze badges

Sign up to request clarification or add additional context in comments.

8 Comments

Gabe Over a year ago

This looks like a better sollution but if i change the ng-model="search" to ng-model"search.name" as follow <input type="text" ng-model="search.name" placeholder="Search"/> it seems to break. What is causing this. I am asking this because i would like to be able to filter on multiple columns

nackjicholson Over a year ago

Change the watch expression to search.name as well. You may want to consider if $watchCollection is something to use in your case. Allows you to watch the properties of an object.

Gabe Over a year ago

I had already figured out the third parameter of the $watch function but i think the $watchCollection is even better. Thanks for that.

nathan1138 Over a year ago

I have my own pagination directive as I have to implement pagination and searching across multiple pages. In this case, how can i add the searching logic to my directive as ng-repeat refers to the controller. If i have to add this logic to the controller, then i have to copy paste the code for all of my pages. Any suggestions?

Matt Hintzke Over a year ago

I am in the same boat... I love this solution, but I am not sure how to implement it across my entire application without copy/pasting the code in every single controller

|

AturSams · Accepted Answer · 2014-09-10 12:04:51Z

4

You could simply use this directive instead:

https://github.com/michaelbromley/angularUtils/tree/master/src/directives/pagination

It offers pagination with a filter while keeping the code nice and clean.

Kudos to michaelbromley for the great code.

answered Sep 10, 2014 at 12:04

AturSams

8,03418 gold badges68 silver badges109 bronze badges

Comments

Mohammad Faisal · Accepted Answer · 2015-08-11 07:50:50Z

3

Use $timeout instead of window.setTimeOut. $timeout is wrapped properly to work consistently in Angular.

edited Aug 11, 2015 at 7:50

Mohammad Faisal

5,95915 gold badges74 silver badges124 bronze badges

answered Apr 22, 2013 at 13:00

abject_error

2,9381 gold badge23 silver badges24 bronze badges

Comments

bob-fornal · Accepted Answer · 2015-02-16 19:04:05Z

2

Use angular $scope.$watch

$scope.$watch('search', function(term) {
    $scope.filter = function() {
        $scope.noOfPages = Math.ceil($scope.filtered.length/$scope.entryLimit);
    }
});

Source ; http://jsfiddle.net/eqCWL/2/

Demo ; http://jsfiddle.net/eqCWL/192/

edited Feb 16, 2015 at 19:04

bob-fornal

5,1205 gold badges34 silver badges45 bronze badges

answered Feb 16, 2015 at 18:45

sinHoot

211 bronze badge

Collectives™ on Stack Overflow

Update pagination in AngularJS after filtering

4 Answers 4

jsFiddle using filterFilter and $watch

8 Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

8 Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related