If you are looking for an working example on Pagination with Filtering using AngularJS, copy paste the following code in note pad and save as Pagination.html:
Additional notes: this example can filter more than one field.
Do let me know if it was helpful by commenting at the bottom! Thanks.
<html>
<head>
<title>AngularJS Pagination Sample</title>
<script src="./lib/angular.min.js"></script>
<!--<script src="./lib/angular-resource.js"></script>-->
<script src="./lib/ui-bootstrap-tpls-0.11.0.js"></script>
<link href="./styles/bootstrap.min.css" rel="stylesheet" />
<!--<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<script src="http://code.angularjs.org/1.4.8/angular.js"></script>
<script src="http://code.angularjs.org/1.4.8/angular-resource.js"></script>
<script src="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.11.0.js"></script> -->
<meta charset="utf-8" />
<script>
(function () {
var app = angular.module('paging-app', ['ui.bootstrap']);
app.controller('MainCtrl', function ($scope, filterFilter) {
$scope.list = [];
$scope.userList = [{"status":null,"role":"role1","permission":null,"username":"user1","password":null,"email":"user1@domain.com","samlresponse":null},{"status":null,"role":"role1","permission":null,"username":"user2","password":null,"email":"user2@domain.net","samlresponse":null},{"status":null,"role":"role1","permission":null,"username":"user3","password":null,"email":"user3@domain.com","samlresponse":null}];
$scope.pageSize = 5;
$scope.init = function () {
for (var i = 0; i < $scope.userList.length; i++) {
$scope.list.push({username:$scope.userList[i].username, email:$scope.userList[i].email});
}
};
var array = [];
$scope.$watch('search.name', function (term) {
var obj = { username: term }
var obj2 = { email: term}
$scope.filterList = filterFilter($scope.list, obj);
array = filterFilter($scope.list, obj2);
for (var i = 0; i < array.length; i++) {
if($scope.filterList.indexOf(array[i]) == -1){
$scope.filterList.push(array[i]);
}
}
$scope.currentPage = 1;
});
})
.filter('start', function () {
return function (input, start) {
if (!input || !input.length) { return; }
start = +start;
return input.slice(start);
};
});
}());
</script>
</head>
<body ng-app="paging-app">
<br />
<div class="container" ng-controller="MainCtrl" ng-init="init()">
<div>
<input type="text" class="form-control" placeholder="Search" ng-model="search.name" />
<br />
</div>
<div>
<div ng-repeat="item in filterList | start: (currentPage - 1) * pageSize | limitTo: pageSize"
class="alert alert-success col-md-12">
<span ng-bind="item.username"></span>
<span ng-bind="item.email"></span>
</div>
<pagination total-items="filterList.length" items-per-page="pageSize" ng-model="currentPage" max-size="5" class="pagination-sm"></pagination>
</div>
</div>
</body>
</html>
Additional notes: this example can filter more than one field.
Do let me know if it was helpful by commenting at the bottom! Thanks.
<html>
<head>
<title>AngularJS Pagination Sample</title>
<script src="./lib/angular.min.js"></script>
<!--<script src="./lib/angular-resource.js"></script>-->
<script src="./lib/ui-bootstrap-tpls-0.11.0.js"></script>
<link href="./styles/bootstrap.min.css" rel="stylesheet" />
<!--<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<script src="http://code.angularjs.org/1.4.8/angular.js"></script>
<script src="http://code.angularjs.org/1.4.8/angular-resource.js"></script>
<script src="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.11.0.js"></script> -->
<meta charset="utf-8" />
<script>
(function () {
var app = angular.module('paging-app', ['ui.bootstrap']);
app.controller('MainCtrl', function ($scope, filterFilter) {
$scope.list = [];
$scope.userList = [{"status":null,"role":"role1","permission":null,"username":"user1","password":null,"email":"user1@domain.com","samlresponse":null},{"status":null,"role":"role1","permission":null,"username":"user2","password":null,"email":"user2@domain.net","samlresponse":null},{"status":null,"role":"role1","permission":null,"username":"user3","password":null,"email":"user3@domain.com","samlresponse":null}];
$scope.pageSize = 5;
$scope.init = function () {
for (var i = 0; i < $scope.userList.length; i++) {
$scope.list.push({username:$scope.userList[i].username, email:$scope.userList[i].email});
}
};
var array = [];
$scope.$watch('search.name', function (term) {
var obj = { username: term }
var obj2 = { email: term}
$scope.filterList = filterFilter($scope.list, obj);
array = filterFilter($scope.list, obj2);
for (var i = 0; i < array.length; i++) {
if($scope.filterList.indexOf(array[i]) == -1){
$scope.filterList.push(array[i]);
}
}
$scope.currentPage = 1;
});
})
.filter('start', function () {
return function (input, start) {
if (!input || !input.length) { return; }
start = +start;
return input.slice(start);
};
});
}());
</script>
</head>
<body ng-app="paging-app">
<br />
<div class="container" ng-controller="MainCtrl" ng-init="init()">
<div>
<input type="text" class="form-control" placeholder="Search" ng-model="search.name" />
<br />
</div>
<div>
<div ng-repeat="item in filterList | start: (currentPage - 1) * pageSize | limitTo: pageSize"
class="alert alert-success col-md-12">
<span ng-bind="item.username"></span>
<span ng-bind="item.email"></span>
</div>
<pagination total-items="filterList.length" items-per-page="pageSize" ng-model="currentPage" max-size="5" class="pagination-sm"></pagination>
</div>
</div>
</body>
</html>
No comments:
Post a Comment