Skip to content

Instantly share code, notes, and snippets.

@TRex22
Last active December 14, 2015 08:32
Show Gist options
  • Save TRex22/ab8a98bf6a136b52bc63 to your computer and use it in GitHub Desktop.
Save TRex22/ab8a98bf6a136b52bc63 to your computer and use it in GitHub Desktop.
AngularJs Pagination ... with some hacks. Pretty much used for older version of Angular (very old versions)
//pagination for all
$scope.pagination = {};
$scope.pagination.pageSize = 3;
$scope.pagination.currentPage = 1;
$scope.pagination.totalPages = 1;
$scope.pagination.totalItems = 0;
$scope.pagination.hasNextPage = false;
$scope.pagination.hasPreviousPage = false;
function firstPage(fn){
if($scope.pagination.hasPreviousPage){
$scope.pagination.currentPage = 1;
fn();
}
}
function previousPage(fn){
if($scope.pagination.hasPreviousPage){
$scope.pagination.currentPage = $scope.pagination.currentPage -1;
fn();
}
}
function nextPage(fn){
if($scope.pagination.hasNextPage){
$scope.pagination.currentPage = $scope.pagination.currentPage +1;
fn();
}
}
function lastPage(fn){
if($scope.pagination.hasNextPage){
$scope.pagination.currentPage = $scope.pagination.totalPages;
fn();
}
}
function activateControls(){
$scope.pagination.firstPageActive = "btn-secondary btn-disabled";
$scope.pagination.previousPageActive = "btn-secondary btn-disabled";
$scope.pagination.nextPageActive = "btn-secondary btn-disabled";
$scope.pagination.lastPageActive = "btn-secondary btn-disabled";
if($scope.pagination.hasNextPage){
$scope.pagination.nextPageActive = "btn-default";
$scope.pagination.lastPageActive = "btn-default";
}
if($scope.pagination.hasPreviousPage){
$scope.pagination.previousPageActive = "btn-default";
$scope.pagination.firstPageActive = "btn-default";
}
}
function initPagination(object){
$scope.pagination.totalPages = object.totalPages;
$scope.pagination.totalItems = object.totalItems;
$scope.pagination.currentPage = object.pageNumber;
$scope.pagination.hasNextPage = object.hasNextPage; //false/true
$scope.pagination.hasPreviousPage = object.hasPreviousPage;
activateControls();
}
$scope.pagination.firstPage = firstPage;
$scope.pagination.previousPage = previousPage;
$scope.pagination.nextPage = nextPage;
$scope.pagination.lastPage = lastPage;
$scope.pagination.initPagination = initPagination;
$scope.pagination.activateControls = activateControls;
//The two controls for the specific controller for the page where the pagination occurs
$scope.pagination.currentPage // use for the page number
$scope.pagination.activateControls();
<div class="col-md-8" >
<button class="btn" ng-class="pagination.firstPageActive" ng-click="pagination.firstPage(getData)" ng-disabled="{{pagination.hasPreviousPage}}">First</button>
<button class="btn" ng-class="pagination.previousPageActive" ng-click="pagination.previousPage(getData)" ng-disabled="{{pagination.hasPreviousPage}}">Previous</button>
<a class="btn btn-default" href="">{{pagination.currentPage}}</a>
<button class="btn" ng-class="pagination.nextPageActive" ng-click="pagination.nextPage(getData)" ng-disabled="{{pagination.hasNextPage}}">Next</button>
<button class="btn" ng-class="pagination.lastPageActive" ng-click="pagination.lastPage(getData)" ng-disabled="{{pagination.hasNextPage}}">Last</button>
</div>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment