Last active
August 29, 2015 14:04
-
-
Save k0d3d/bb92b7321c7aea7ad18c to your computer and use it in GitHub Desktop.
Simple Angular JS Paging / Pagination Directive
This file contains 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
// this is an example . A simple function that | |
// calls a service that loads users from an ajax source | |
//@params {Number} page the number of the page to load | |
//@param {Number} limit the amount of items / results to load | |
//@param {Function} cb a callback function that gets called when | |
// and if results are returned. | |
$scope.load_users = function (page, limit, cb) { | |
adminService.loadUsers({ | |
page: page, | |
limit: limit | |
}) | |
.then(function (res) { | |
if (res.length) { | |
cb(res.length); | |
$scope.users_list = res; | |
} | |
}); | |
}; |
This file contains 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
app.directive('pagination', [function(){ | |
function link(scope, element, attrs){ | |
} | |
function pageCtrl ($scope) { | |
$scope.currentPage = 0; | |
$scope.pageLimit = 10; | |
$scope.prevBtn = function () { | |
if($scope.currentPage === 0) return false; | |
$scope.pageTo({ | |
currentPage: $scope.currentPage - 1, | |
pageLimit: $scope.pageLimit, | |
cb: function () { | |
--$scope.currentPage; | |
} | |
}); | |
}; | |
$scope.nextBtn = function () { | |
// if($scope.currentPage === 0) return false; | |
$scope.pageTo({ | |
currentPage: $scope.currentPage + 1, | |
pageLimit: $scope.pageLimit, | |
cb: function (len) { | |
if (len) { | |
++$scope.currentPage; | |
} | |
} | |
}); | |
}; | |
$scope.pagelimit = function(pageLimit){ | |
$scope.pageTo({ | |
currentPage: $scope.currentPage, | |
pageLimit: pageLimit, | |
cb: function(r){ | |
if(r) $scope.pageLimit = pageLimit; | |
} | |
}); | |
//quick hack!! should suffice for now | |
$scope.pageLimit = pageLimit; | |
}; | |
// loads the initial page | |
$scope.pageTo({ | |
currentPage: $scope.currentPage, | |
pageLimit: $scope.pageLimit, | |
cb: function () { | |
} | |
}); | |
} | |
return { | |
link: link, | |
scope: { | |
pageTo: '&' | |
}, | |
controller: pageCtrl, | |
templateUrl: '/templates/pagination' | |
}; | |
}]); |
This file contains 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
button.btn.btn-success.prevbtn(ng-disabled="currentPage == 0", ng-click="prevBtn()") | |
| Previous | |
.btn-group.dropup | |
button.btn.pageNo.btn-bell.btn-small(type="button", style="border-radius: 0") | |
| {{currentPage}} | |
button.btn.dropdown-toggle(data-toggle="dropdown", style="border-radius: 0") | |
span.caret | |
ul.dropdown-menu.alt-text(role="menu", style="text-transform: capitalize;z-index: 99999") | |
li | |
a(ng-click="pagelimit(10)") 10 | |
li | |
a(ng-click="pagelimit(20)") 20 | |
li | |
a(ng-click="pagelimit(50)") 50 | |
li | |
a(ng-click="pagelimit(100)") 100 | |
button.btn.btn-success.nextbtn(ng-click="nextBtn()") | |
| Next |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment