2

I'm trying to implement pagination in my angular app. I have an array of 1000+ books, and I'd like my currentPage / totalPages vars to update based on my filtered ngRepeat.

Here's my current Angular code:

function Books($scope, $http, $rootScope){
    $scope.books = [1000+ books];
    $scope.filteredbooks = [];

    $scope.numberOfPages = function(){
        return Math.ceil($scope.filteredbooks.length / $scope.pageSize);
    }
}

My next / prev buttons:

<button ng-disabled="currentPage == 0" ng-click="currentPage=currentPage-1">
     Previous
</button>
{{currentPage+1}}/{{numberOfPages()}}
<button ng-disabled="currentPage >= data.length/pageSize - 1" 
        ng-click="currentPage=currentPage+1">
     Next
</button>

Here's my ngRepeat:

<tr ng-repeat="book in (filteredbooks = books | filter: search) | 
               orderBy: 'title' | startFrom: currentPage * pageSize | 
               limitTo: pageSize">
     {{book.title}}
</tr>

My problem is that filteredbooks in my ngRepeat isn't setting my $scope.filteredbooks, so my length for total pages isn't updating. Is there a way to do this?

Also is there an event or directive that I can hook into to set my $scope.currentPage to 0 when the search term is changed?

Thanks in advance!

Edit: Here's a fiddle of the go-to example with a search box: http://jsfiddle.net/4LRbN/

Keith
  • 4,144
  • 7
  • 25
  • 43

2 Answers2

1

You can use a function to tell the page where to start from.

DEMO

In Angular you already have a built-in function limitTo so we're just adding the startFrom function so it can track it's location the results.

{{(data.length}} will give you the total number of results. {{(data|filter:searchterm).length}} will give you the number of filtered results.

Updated fiddle.

I would also recommend looking at the example fiddles on Angular's wiki here.

Drewness
  • 5,004
  • 4
  • 32
  • 50
  • That's the exact fiddle I followed along with. It's missing `filter`ing, with the `total-pages` updated when a new search-term is typed. Do you know how to get the length of the resulting filtered array? – Keith Feb 25 '14 at 05:41
  • 1
    @Prodikl - See the `numberOfReults()` function I added to the fiddle. http://jsfiddle.net/2ZzZB/926/. – Drewness Feb 25 '14 at 05:48
  • Thank you. Could you check out this fiddle?:http://jsfiddle.net/4LRbN/ (I added filtering, and I'm having trouble with `numberOfResults` reflecting the filtered array) – Keith Feb 25 '14 at 05:54
  • 1
    @Prodikl - The problem is all of this is 'filtering' data that's already been loaded in the browser. – Drewness Feb 25 '14 at 06:06
  • 1
    @Prodikl - I've updated the [fiddle](http://jsfiddle.net/4LRbN/1/). Using `{{(data|filter:searchterm).length}}` is what you're looking for. – Drewness Feb 25 '14 at 06:12
  • Thank you very much! I'll accept your answer! Would there be a way to write that in my JS code? `$scope.pagesTotal = function(){ return Math.ceil(($scope.data|filter:$scope.searchterm).length / $scope.pageSize);}` doesn't seem to work. – Keith Feb 25 '14 at 06:22
  • 1
    @Prodikl - It cannot be in the JS code _because_ it is filtering *all* of the data that has already been loaded on the page by the JS code. – Drewness Feb 25 '14 at 14:04
  • I see. Thanks for the responses and all the help – Keith Feb 26 '14 at 03:16
1

Here is more samples for that

Pagination on a list using ng-repeat

or take a look this

https://stackoverflow.com/a/19410927/2218635

Result like

enter image description here

see : How to achieve pagination/table layout with Angular.js?

Community
  • 1
  • 1
Ramesh Rajendran
  • 37,412
  • 45
  • 153
  • 234
  • Thank you very much for the link, I was looking through that example, but finding the meat and potatoes of it was pretty tough. – Keith Feb 25 '14 at 06:23