Changing infinite scroll pagination to page by page pagination

Question

I currently have infinite scroll pagination with an Elasticsearch and AngularJS search app. I am trying to change that "regular" pagination (like Google or Bing search engines). I'm trying to use AngularJS UI Bootstrap Pagination but can not seem to get it to work. It displays correctly but the click action does not work - does not load the next set of results.

Here is the HTML for the AngularJS UI Bootstrap pagination directive:

<uib-pagination class="pagination" ng-model="currentPage" ng-change="getNextPage(currentPage)" ng-click="getNextPage()" ng-if="canGetNextPage" total-items="totalItems" max-size="noOfPages" direction-links="true" items-per-page="itemsPerPage">

Here is the relevant JS code for the infinite scroll:

$scope.getNextPage = function() {
  $scope.resultsPage++;
  getResults();

};

and the $watchGroup:

    $scope.$watchGroup(['results', 'noResults', 'isSearching', 'totalItems', 'currentPage + itemsPerPage'], function() { 
    var totalItems = $scope.results.documentCount;

    if (!totalItems || totalItems <= $scope.results.documents.length || $scope.noResults || $scope.isSearching) {
      $scope.canGetNextPage = false;
    } 
    else {
      $scope.canGetNextPage = true;
    }
  });

I've tried following many tutorials(here) and here as well as this SO question on this but no matter what, I can't get the click action to work. I usually put the click action code in the getNextPage function and leave the other code because the Bootstrap pagination directive is suppose to take care of that.

I was also looking into this pagination directive but not sure if that is a better solution.

I want to do client-side pagination vs server-side, I'm only loading the first 1000 json results so that should be fine.

Any help into the click action or maybe a better solution that I'm not aware of would be great!!

Did you really just delete your question content because you didn't get an answer quick enough? Yea if you need a answer asasp it won't help but people come across questions months after there asked with solutions. — ste2425, Dec 17 '15 at 15:40
@ste2425 The speed had nothing to do with it. I would have deleted the question before but it was already answered with a link to a project that I've seen before. In fact, I've seen the link many times before related to the same question - trying to get a different answer to my question — user3125823, Dec 17 '15 at 16:05

score 0 · Answer 1 · answered Dec 16 '15 at 22:07

0

there is a project called ElasticUI,it is a set of AngularJS directives that can help you, especially in the paging party

answered Dec 16 '15 at 22:07

aitnasser

1,216
1
9
23

thanks for the link and I've seen that project before, at which point I decided not to use it – user3125823 Dec 16 '15 at 22:12

score 0 · Answer 2 · answered Feb 11 '16 at 21:30

0

Changing the inifinite scroll required replacing an if statement with a loop structure

answered Feb 11 '16 at 21:30

user3125823

1,846
2
18
46

Changing infinite scroll pagination to page by page pagination

2 Answers2