AngularJS Table Filtering with Ng-Table

  Total Views : 968
  Comments : 1
 
  Keywords : Angularjs filter table data using ng-table example, Sort table data using angularjs ng-table module, Angularjs filtering sorting pagination for table data with example

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.

AngularJS Table with Filtering

In angularjs we can implement filtering for table columns data by using 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.

Syntax of AngularJS Table with Filtering

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.

AngularJS Table with Filtering Example

Following is the example of filtering table columns data using ng-table module in angularjs applications.

 

Live Preview

<!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 sortingpaging and filtering to table data in angularjs application using ng-table module. Now we will run and see the result of application.

Output of AngularJS Table with Filtering Example

Following is the result of filtering table columns data using ng-table module in angularjs applications.

 

Angularjs filter table data using ng-table module example result

 

This is how we can implement filtering to table data using ng-module in angularjs applications.

 Comments (1)

  • Lalat Nayak tutlane registered profile image
     
    Lalat Nayak   Reply

    Good one. Is there a way I can put a default value in the filter text boxes?

     Aug 03, 2016

Leave a comment

  • Default Tutlane User