-
-
Save RicardoRFaria/d2a8b1ce937e2f31cccf to your computer and use it in GitHub Desktop.
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
<!-- STEP 1: Add This Script Markup to your Page.. This is the Template for the Pager --> | |
<!-- Pager Markup --> | |
<script id="od-pager.html" type="text/ng-template"> | |
<ul class="pagination" ng-show="links().length > 1"> | |
<li><a ng-click="prev()">«</a></li> | |
<li ng-class="{active:isCurrentPage(item)}" ng-repeat="item in links()"><a ng-click="goto(item)">{{item + 1}}</a></li> | |
<li><a ng-click="next()">»</a></li> | |
</ul> | |
</script> |
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
/* | |
* STEP 4: | |
* This creates the Pager Directive to encapsulate paging functionality | |
* It depends on the PagedList class | |
*/ | |
app.directive("odPager", function () { | |
var dir = { | |
restrict: "EAC", | |
templateUrl: "od-pager.html", | |
scope: { | |
page: "=" | |
}, | |
controller: function ($scope) { | |
$scope.next = function () { | |
$scope.page.NextPage(); | |
console.log("Next Clicked: " + $scope.page.Items().length); | |
}; | |
$scope.prev = function () { | |
$scope.page.previousPage(); | |
}; | |
$scope.goto = function (index) { | |
$scope.page.Goto(index + 1); | |
}; | |
$scope.links = function () { | |
var page = $scope.page; | |
if (page) { | |
return _.range(page.TotalPages()).toArray(); | |
} | |
return []; | |
}; | |
$scope.isCurrentPage = function (item) { | |
return $scope.page.CurrentPage() == item + 1; | |
}; | |
} | |
}; | |
return dir; | |
}); |
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
<!-- | |
STEP 5: | |
Simply add the following markup to where you want a pager to show up on your page | |
--> | |
<!-- This will loop through all the items in the current page --> | |
<ul> | |
<li ng-repeat="item in pagedlist.Items()">{{item}}</li> | |
</ul> | |
<div od-pager page="pagedlist" /> |
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
// Step 6: | |
// Now we need to create pagelist and attach it to the $scope | |
app.controller(function($scope){ | |
var allitems = ["bag","shoe","umbrella","glasses","wristwatches","hats"]; | |
$scope.pagedlist = new PagedList(allitems,3); //Create a pagelist with three items per page | |
}); |
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
/** | |
* STEP 2: Add LazyJS (http://danieltao.com/lazy.js/) to your page. | |
* | |
* STEP 3: Add The remaining code to the code where you created your angular application. | |
* Its usually an app.js file also replace "app" with whatever name you called your angular module | |
*/ | |
var _ = Lazy; | |
var PagedList = (function () { | |
function PagedList(all, itemsPerPage) { | |
//Set Default Items per page to 10 to prevent Division by Zero | |
if (!itemsPerPage || itemsPerPage <= 0) | |
itemsPerPage = 10; | |
this.page = 1; | |
this.itemCount = itemsPerPage; | |
this.allItems = all; | |
this.pages = Math.floor(all.length / itemsPerPage); | |
if (all.length % itemsPerPage > 0) | |
this.pages++; | |
} | |
PagedList.prototype.NextPage = function () { | |
if (this.page < this.pages) { | |
this.page++; | |
} | |
}; | |
PagedList.prototype.CurrentPage = function () { | |
return this.page; | |
}; | |
PagedList.prototype.previousPage = function () { | |
if (this.page > 1) { | |
this.page--; | |
} | |
}; | |
PagedList.prototype.Goto = function (page) { | |
if (page > 0 && page <= this.pages) { | |
this.page = page; | |
} | |
}; | |
PagedList.prototype.Count = function () { | |
return this.allItems.length; | |
}; | |
PagedList.prototype.Items = function () { | |
return _(this.allItems).skip((this.page - 1) * this.itemCount).take(this.itemCount).toArray(); | |
}; | |
PagedList.prototype.Add = function (el) { | |
this.allItems.push(el); | |
}; | |
PagedList.prototype.Remove = function (el) { | |
var index = this.allItems.indexOf(el); | |
if (index > -1) { | |
this.allItems.splice(index, 1); | |
} | |
}; | |
PagedList.prototype.Clear = function () { | |
this.allItems.length = 0; | |
}; | |
PagedList.prototype.TotalPages = function () { | |
return this.pages; | |
}; | |
return PagedList; | |
})(); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment