Here we will learn how to implement sorting, paging to table data in angularjs using ng-table module and example to use ng-table to sort table data in angularjs applications.
In angularjs we can implement sorting for table columns by using ng-table module. Generally in angularjs if we want to implement sorting for table columns we need to write a lot of code but if we use ng-table module in angularjs applications it’s very easy to implement sorting for table columns with few lines of code.
Following is the syntax of implementing sorting for table columns using ng-table in angularjs applications.
getData: function ($defer, params) {
$scope.data = params.sorting() ? $filter('orderBy')($scope.users, params.orderBy()) : $scope.users;
$defer.resolve($scope.data);
}
If you observe above syntax we are implementing sorting functionality to $scope.users object by using orderBy filter in angularjs. Here getData function will call every time whenever we sort the table column and it will refresh the data of $scope.users object based on sort column.
If you want to know more about using ng-table in angularjs check this AngularJS Tables with ng-table.
Following is the example of implementing sorting functionality to table columns in angularjs applications using ng-table module.
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>
AngularJs Sort 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 = $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 Sorting Example</h2>
<table ng-table ="usersTable" class="table table-bordered table-striped">
<tr ng-repeat="user in data">
<td data-title="'Name'" sortable="'name'">{{user.name}}</td>
<td data-title="'Age'" sortable="'age'">{{user.age}}</td>
<td data-title="'Location'" sortable="'location'">{{user.location}}</td>
</tr>
</table>
</div>
</body>
</html>
If you observe above code we are implementing both paging and sorting for table data in angularjs applications and used bootstrap css plugin to apply bootstrap styles to table. Now we will run and see the result of applications.
Following is the result of implementing sorting for table columns using ng-table module in angularjs applications.
This is how we can implement sorting to table data in angularjs applications using ng-table module.