Skip to content

Instantly share code, notes, and snippets.

Avatar

Qazi Mobeen qazimobeen

View GitHub Profile
View pagination-directiveWatch.js
$scope.originalItems = [];
$scope.pageSizeOptions = [
{ count: '10', value: '10' },
{ count: '20', value: '20'},
{ count: '50', value: '50' }
];
$scope.pageSize = $scope.pageSizeOptions[1]; // default page size as per AC
View pagination-pageNoChanged.js
$scope.pageNoChanged = function (value) {
// evaluates what is your current situation and can page no be changed?
if ($scope.currentPage === 1 && value < -1) {
//console.log("you can't request page change");
// if you are on FIRST page and requested FIRST page
return;
}
else if ($scope.currentPage === $scope.lastPage && value > 1) {
//console.log("you can't request page change");
// if you are on LAST page and requested LAST page
View pagination-pageSize.js
$scope.pageSizeChanged = function () {
var begin = 0; // if you change page size anytime it always starts from begining
var end = parseInt($scope.pageSize.value);
$scope.currentPage = 1; // reset current page from the start
$scope.lastPage = parseInt(Math.ceil($scope.originalItems.length / $scope.pageSize.value)); // re-calculates the last page
$scope.items = $scope.originalItems.slice(begin, end);
};
View pagination-directive.html
<div class="tablenav">
<span class="displaying-num">
Records per page
<select name="recordsPerPage" ng-model="pageSize" ng-options="page.value for page in pageSizeOptions" ng-change="pageSizeChanged()">
</select>
</span>
<div class="tablenav-pages">
<span class="pagination-links">
<span>{{engagementItems.length}} items </span>
<a class="first-page" ng-click="pageNoChanged(-2)"><span>«</span></a>