Skip to content

Instantly share code, notes, and snippets.

@k0d3d
Last active August 29, 2015 14:04
Show Gist options
  • Save k0d3d/bb92b7321c7aea7ad18c to your computer and use it in GitHub Desktop.
Save k0d3d/bb92b7321c7aea7ad18c to your computer and use it in GitHub Desktop.
Simple Angular JS Paging / Pagination Directive
// 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;
}
});
};
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'
};
}]);
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