CODEWITHSUNDEEP
javascriptangularjs
user1555863
user1555863

Reputation: 2607

Angular Search with Pagination

I'm trying to combine a search box with pagination functionality.

Consider the following markup for a list of images:

<div class="panel panel-info" ng-repeat="image in galleryCtrl.images |
startFrom: galleryCtrl.currentPage * galleryCtrl.resultsPerPageNum |
limitTo: galleryCtrl.resultsPerPageNum  | filter: search | orderBy: sort">

and my search box:

<div class="form-group" ng-hide="mySearch === 'false'">
    <label for="searchbox">Search: </label>
    <input type="text" id="searchbox" ng-model="search" 
    class="form-control" placeholder="What are we searching for?">
</div>

My issue is, this way only images from the current page are being searched in. If I search for an image that appears on the 2nd page and I'm on the 1st page, It won't appear as a result. How can I first apply the search filter and than "paginate"?

EDIT The issue now is that after typing more than 1 letter in the search box, there are no search results. For my pagination, i'm using the following filter:

app.filter('startFrom',function(){
        return function(input,start) {
            start = +start; //int parsing
            return input.slice(start);
        }
});

Maybe this is the problem?

Upvotes: 0

Views: 1021

Answers (1)

Thor Jacobsen
Thor Jacobsen

Reputation: 8851

You should move the filter: seach up front in the list of filters. That way data is first filtered, then paged, then sorted.

Like this:

<div class="panel panel-info" ng-repeat="image in galleryCtrl.images | filter: search | startFrom: galleryCtrl.currentPage * galleryCtrl.resultsPerPageNum | limitTo: galleryCtrl.resultsPerPageNum | orderBy: sort">

Upvotes: 1

Related Questions