Created
May 14, 2013 11:20
-
-
Save egaumer/5575237 to your computer and use it in GitHub Desktop.
Elasticsearch/AngularJS Pagination Example
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
$scope.pager = { | |
pageChange: function(pageNum) { | |
$scope.search(resultPager.get(pageNum)); | |
}, | |
next: function() { | |
this.pageChange(resultPager.next()); | |
}, | |
prev: function() { | |
this.pageChange(resultPager.previous()); | |
}, | |
pageClass: function(ind){ | |
return ind+1 === resultPager.current() ? "disabled" : ""; | |
}, | |
prevClass: function() { | |
return resultPager.current() > 1 ? "" : "disabled"; | |
}, | |
nextClass: function() { | |
return resultPager.current() < resultPager.total() ? "" : "disabled"; | |
}, | |
pages: function() { | |
return resultPager.pages(pageMin, pageMax); | |
} | |
}; |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<div class="pagination" ng-model="pager"> | |
<ul> | |
<li ng-class="pager.prevClass()"><a ng-click="pager.prev()">Prev</a></li> | |
<li ng-class="pager.pageClass($index)" ng-repeat="page in pager.pages()"> | |
<a ng-click="pager.pageChange(page)">{{page}}</a> | |
</li> | |
<li ng-class="pager.nextClass()"><a ng-click="pager.next()">Next</a></li> | |
</ul> | |
</div> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
ResultPager: function(request, hits) { | |
var total = Math.ceil(hits / request.size); | |
total = total === 0 ? 1 : total; | |
var current = Math.ceil((request.from / request.size) + 1); | |
return { | |
total: function() { | |
return total; | |
}, | |
current: function() { | |
return current; | |
}, | |
next: function() { | |
var next = current; | |
if (current < total) { | |
next = current + 1; | |
} | |
return next; | |
}, | |
previous: function() { | |
var previous = current; | |
if (current > 1) { | |
previous = current - 1; | |
} | |
return previous; | |
}, | |
pages: function(min, max) { | |
var pages = [], | |
end = current + min < total ? current + min : total + 1, | |
start = end - max > 1 ? end - max : 1, | |
i; | |
for (i = start; i < end; i++) { | |
pages.push(i); | |
} | |
return pages; | |
}, | |
get: function(page) { | |
var start = (page * request.size) - request.size; | |
return start; | |
} | |
}; | |
} |
really, a demo page would be great. thanks!
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
👍 a demo page would be great !