Skip to content

Instantly share code, notes, and snippets.

@chaseconey

chaseconey/index.html

Created April 11, 2014 02:46
Show Gist options
  • Save chaseconey/10438262 to your computer and use it in GitHub Desktop.
Save chaseconey/10438262 to your computer and use it in GitHub Desktop.
Download ZIP
Angular Pagination and Search
Raw
index.html
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
<!-- bower:css -->
<link rel="stylesheet" href="/bower_components/foundation/css/foundation.css" />
<!--endbower -->
</head>
<body ng-app="testApp">
<div id="content" ng-controller="Ctrl">
<div class="large-8 columns centered">
<div class="row">
<input type="search" ng-model="search">
<div class="control-group">
<label class="control-label" for="rows-per-page">Rows per page</label>
<div class="controls">
<select id="rows-per-page" ng-model="rowsPerPage" class="input-xlarge">
<option>5</option>
<option>10</option>
<option>20</option>
<option>50</option>
</select>
</div>
</div>
</div>
<div class="row">
<paginator></paginator>
</div>
<ul id="cards" class="row">
<li ng-repeat="card in filteredCards | paginate:rowsPerPage">
{{ card.name }} [{{ card.id }}]
<div>Issuer: {{ card.issuer_id }}</div>
<span>Starting on {{ card.start_time }}</span>
<span>Ending on {{ card.end_time }}</span>
<button ng-click="remove($index)">Event</button>
<button ng-click="something()">Event</button>
</li>
</ul>
</div>
<!-- bower:js -->
<script src="/bower_components/modernizr/modernizr.js"></script>
<script src="/bower_components/jquery/dist/jquery.js"></script>
<script src="/bower_components/fastclick/lib/fastclick.js"></script>
<script src="/bower_components/jquery.cookie/jquery.cookie.js"></script>
<script src="/bower_components/jquery-placeholder/jquery.placeholder.js"></script>
<script src="/bower_components/foundation/js/foundation.js"></script>
<script src="/bower_components/angular/angular.js"></script>
<script src="/bower_components/angular-resource/angular-resource.js"></script>
<script src="/bower_components/ngInfiniteScroll/ng-infinite-scroll.js"></script>
<!-- endbower -->
<script>
angular.module('pagination', [])
.filter('paginate', function(Paginator) {
return function(input, rowsPerPage) {
if (!input) {
return input;
}
if (rowsPerPage) {
Paginator.rowsPerPage = rowsPerPage;
}
Paginator.itemCount = input.length;
return input.slice(parseInt(Paginator.page * Paginator.rowsPerPage), parseInt((Paginator.page + 1) * Paginator.rowsPerPage + 1) - 1);
}
})
.filter('forLoop', function() {
return function(input, start, end) {
input = new Array(end - start);
for (var i = 0; start < end; start++, i++) {
input[i] = start;
}
return input;
}
})
.service('Paginator', function ($rootScope) {
this.page = 0;
this.rowsPerPage = 50;
this.itemCount = 0;
this.limitPerPage = 5;
this.setPage = function (page) {
if (page > this.pageCount()) {
return;
}
this.page = page;
};
this.nextPage = function () {
if (this.isLastPage()) {
return;
}
this.page++;
};
this.perviousPage = function () {
if (this.isFirstPage()) {
return;
}
this.page--;
};
this.firstPage = function () {
this.page = 0;
};
this.lastPage = function () {
this.page = this.pageCount() - 1;
};
this.isFirstPage = function () {
return this.page == 0;
};
this.isLastPage = function () {
return this.page == this.pageCount() - 1;
};
this.pageCount = function () {
return Math.ceil(parseInt(this.itemCount) / parseInt(this.rowsPerPage));
};
this.lowerLimit = function() {
var pageCountLimitPerPageDiff = this.pageCount() - this.limitPerPage;
if (pageCountLimitPerPageDiff < 0) {
return 0;
}
if (this.page > pageCountLimitPerPageDiff + 1) {
return pageCountLimitPerPageDiff;
}
var low = this.page - (Math.ceil(this.limitPerPage/2) - 1);
return Math.max(low, 0);
};
})
.directive('paginator', function factory() {
return {
restrict:'E',
controller: function ($scope, Paginator) {
$scope.paginator = Paginator;
$scope.$watch('search', function(term) {
$scope.paginator.setPage(0);
});
},
templateUrl: '/paginationTemplate.html'
};
});
var module = angular.module('testApp', ['pagination']);
module.controller('Ctrl', function ($scope, $http, filterFilter) {
$scope.cards = [];
$scope.filteredCards = [];
$scope.rowsPerPage = 5;
$http({method: 'GET', url: '/card'}).
success(function(data, status, headers, config) {
$scope.cards = data;
$scope.filteredCards = data;
$scope.cache = angular.copy($scope.cards);
}).
error(function(data, status, headers, config) {
$scope.cards = 'FAIL';
});
$scope.$watch('search', function(term) {
// Create $scope.filtered and then calculat $scope.noOfPages, no racing!
$scope.filteredCards = filterFilter($scope.cards, term);
});
$scope.remove = function(index) {
$scope.cards.splice(index, 1);
}
});
</script>
</body>
</html>
Raw
paginationTemplate.html
<div class="pagination text-center" ng-show="paginator.pageCount() > 1">
<ul>
<li ng-click="paginator.firstPage()" ng-class="paginator.isFirstPage() && 'disabled'">
<a>
<i class="icon-fast-backward" ng-class="paginator.isFirstPage() && 'icon-white'"></i>
</a>
</li>
<li ng-click="paginator.perviousPage()" ng-class="paginator.isFirstPage() && 'disabled'">
<a>
<i class="icon-step-backward" ng-class="paginator.isFirstPage() && 'icon-white'"></i>
</a>
</li>
<li ng-click="paginator.setPage(i)" ng-repeat="i in [] | forLoop:paginator.lowerLimit():paginator.pageCount() | limitTo : paginator.limitPerPage" ng-class="paginator.page==i && 'active'">
<a>
<i>{{i+1}}</i>
</a>
</li>
<li ng-click="paginator.nextPage()" ng-class="paginator.isLastPage() && 'disabled'">
<a>
<i class="icon-step-forward" ng-class="paginator.isLastPage() && 'icon-white'"></i>
</a>
</li>
<li ng-click="paginator.lastPage()" ng-class="paginator.isLastPage() && 'disabled'">
<a>
<i class="icon-fast-forward" ng-class="paginator.isLastPage() && 'icon-white'"></i>
</a>
</li>
</ul>
</div>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment