Here we will learn how to implement filtering to table columns / rows data in angularjs using ng-table module along with sorting and pagination options.
In angularjs we can implement filtering for table columns data by using the ng-table module. Generally, in angularjs if we want to implement filtering for table columns data we need to write a lot of code but if we use ng-table module in angularjs applications it’s very easy to implement filtering for table columns data with few lines of code.
Following is the syntax of implementing filtering for table columns data using ng-table in angularjs applications.
getData: function ($defer, params) {
$scope.data = params.filter() ? $filter('filter')($scope.data, params.filter()) : $scope.data;
$defer.resolve($scope.data);
}
If you observe above syntax we are implementing filtering functionality to $scope.users object by using filter in angularjs. Here getData function will call every time whenever we try to filter table column data and it will refresh the data of $scope.users object based on filter column data.
If you want to know more about using ng-table in angularjs check this AngularJS Tables with ng-table.
Following is the example of filtering table columns data using ng-table module in angularjs applications.
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>
AngularJs Filter Table Columns Example
</title>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<link href="http://netdna.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet" media="screen">
<link rel="stylesheet" href="https://rawgit.com/esvit/ng-table/master/dist/ng-table.min.css">
<script src="https://rawgit.com/esvit/ng-table/master/dist/ng-table.min.js"></script>
<script type="text/javascript">
var app = angular.module("ngtableApp", ["ngTable"]);
app.controller("ngtableCtrl", function ($scope, $filter, ngTableParams) {
$scope.users = [
{ name: "Madhav Sai", age: 10, location: 'Nagpur' },
{ name: "Suresh Dasari", age: 30, location: 'Chennai' },
{ name: "Rohini Alavala", age: 29, location: 'Chennai' },
{ name: "Praveen Kumar", age: 25, location: 'Bangalore' },
{ name: "Sateesh Chandra", age: 27, location: 'Vizag' },
{ name: "Siva Prasad", age: 38, location: 'Nagpur' },
{ name: "Sudheer Rayana", age: 25, location: 'Kakinada' },
{ name: "Honey Yemineni", age: 7, location: 'Nagpur' },
{ name: "Mahendra Dasari", age: 22, location: 'Vijayawada' },
{ name: "Mahesh Dasari", age: 23, location: 'California' },
{ name: "Nagaraju Dasari", age: 34, location: 'Atlanta' },
{ name: "Gopi Krishna", age: 29, location: 'Repalle' },
{ name: "Sudheer Uppala", age: 19, location: 'Guntur' },
{ name: "Sushmita", age: 27, location: 'Vizag' }
];
$scope.usersTable = new ngTableParams({
page: 1,
count: 5
}, {
total: $scope.users.length,
getData: function ($defer, params) {
$scope.data = params.sorting() ? $filter('orderBy')($scope.users, params.orderBy()) : $scope.users;
$scope.data = params.filter() ? $filter('filter')($scope.data, params.filter()) : $scope.data;
$scope.data = $scope.data.slice((params.page() - 1) * params.count(), params.page() * params.count());
$defer.resolve($scope.data);
}
});
});
</script>
</head>
<body ng-app="ngtableApp">
<div ng-controller="ngtableCtrl">
<h2>AngularJS ng-table Filtering Example</h2>
<table ng-table ="usersTable" show-filter=true class="table table-bordered table-striped">
<tr ng-repeat="user in data">
<td data-title="'Name'" sortable="'name'" filter="{ 'name': 'text' }">{{user.name}}</td>
<td data-title="'Age'" sortable="'age'" filter="{ 'age': 'text' }">{{user.age}}</td>
<td data-title="'Location'" sortable="'location'" filter="{ 'location': 'text' }">{{user.location}}</td>
</tr>
</table>
</div>
</body>
</html>
If you observe above code we are implementing sorting, paging and filtering to table data in angularjs application using ng-table module. Now we will run and see the result of application.
Following is the result of filtering table columns data using the ng-table module in angularjs applications.
This is how we can implement filtering to table data using ng-module in angularjs applications.