UPDATED
I used to think that I client-side pagination would be best when simply just trying to filter through(10 at a time) the first 100 results of a simple search app with Elasticsearch and AngularJS. I've done ALOT of reading since then and it seems lots of people advocate the server-side approach...
So if I have this pagination code in my controller
$scope.getNextPage = function() {
$scope.resultsPage++;
getResults();
};
$scope.$watchGroup(['results', 'noResults', 'isSearching'], function() {
var documentCount = $scope.results.documentCount;
if (!documentCount || documentCount <= $scope.results.documents.length || $scope.noResults || $scope.isSearching) {
$scope.canGetNextPage = false;
}
else {
$scope.canGetNextPage = true;
}
});
which results in the "infinite scroll" option that is becoming more popular. How would I "convert" the infinite scroll to the more traditional "page by page" pagination (like Google and Bing) option. I've tried numerous things but can not seem to get it to work. Now I'm beginning to think it has some something to do with how the results are loaded
if (totalHits > 0) {
$scope.results.documentCount = totalHits;
$scope.results.documents.push.apply($scope.results.documents, searchService.formatResults(es_return.hits.hits));...
I've tried swapping out "push.apply" for the slice method in js but that is not working. I've even take out the $scope.resultspage++; getNextPage() but that had no effect either.
Is it that line the problem... how do I convert this code to do "traditional" pagination?
Legacy
I'm trying to get pagination working on a small search app that uses Elasticsearch and AngularJS. Also using AngularJS UI Bootstrap for the pagination- trying to anyway.
I've read through this popular thread and pretty much have it in place but its not working and I can't seem to figure out why. Specifically, the pagination does display, but clicking on the buttons does nothing (it doesn't filter through to the next set of results).
I'm loading the first 1000 results to the UI and then just trying to filter through those.
My HTML div is:
<uib-pagination class="pagination" ng-if="results.documentCount > 10" ng-model="currentPage" max-size="maxSize" total-items="results.documentCount" items-per-page="itemsPerPage" direction-links="true">
My ng-repeat for the results list goes like this:
<li ng-repeat="page in results.documents">
<a href="{{page.url}}"><span ng-bind-html="page.title"></span></a><br />
<span ng-bind-html="page.url"></span>
<p ng-bind-html="page.content"></p>
</li>
And my pagination js is:
$scope.currentPage = 1;
$scope.itemsPerPage = 10;
$scope.totalItems = 1000;
$scope.noOfPages = Math.ceil(($scope.totalItems / $scope.itemsPerPage) / 10);
$scope.maxSize = $scope.noOfPages;
$scope.paginationList = [];
$scope.$watch("currentPage + itemsPerPage", updatePagination);
makePagination();
////
var updatePagination = function() {
var begin = (($scope.currentPage -1) * $scope.itemsPerPage),
end = begin + $scope.itemsPerPage;
$scope.results.documents = $scope.paginationList.slice(begin, end);
};
var makePagination = function() {
var i;
var page = $scope.results.documents;
$scope.paginationList = [];
for (i=1; i <= 1000; i++) {
$scope.paginationList.push(i)
}
};
I'm pretty sure it has something to do with the $scope.paginationList.push(i) part because I'm not quite sure what to put there because of how my ng-repeat is, its more complex than the other example given in the answer.
