September 5, 2020
Category : Angular
AngularJS - sorting(using orderby filter) table data example with demo
Data sort in one of the most important and essential component in any web based projects. we can find data in order by any field then we can find any data easily from reach data.
In this post, we can learn how to sort table row using AngularJS orderby filter. in bellow example you can see we have two column one for language and another for total developer. So if you click on table heading then you can sort data using orderBy filert. You can learn and see bellow example.
Example
<html lang="en-US">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body>
<div ng-app="myApp" ng-controller="customersCtrl">
<h2 class="text-center">AngularJS sortable table example</h2>
<div class="text-center">
<strong>Note:</strong> click on table heading and change order
</div>
<div class="container">
<table class="table table-bordered">
<tr>
<th ng-click="sortBy('language')">Language</th>
<th ng-click="sortBy('developer')">Total Developer</th>
</tr>
<tr ng-repeat="x in names | orderBy:sortField:reverseOrder">
<td>{{ x.language }}</td>
<td>{{ x.developer }}</td>
</tr>
</table>
</div>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('customersCtrl', function($scope, $http) {
$scope.names = [
{'language': 'PHP', 'developer': '11' },
{'language': 'Laravel', 'developer': '12'},
{'language': 'Angular JS', 'developer': '23'},
{'language': 'Jquery', 'developer': '25'},
{'language': 'Java', 'developer': '21'},
{'language': 'Facebook API', 'developer': '26'},
];
$scope.reverseOrder = true;
$scope.sortField = 'developer';
$scope.sortBy = function(sortField) {
$scope.reverseOrder = ($scope.sortField === sortField) ? !$scope.reverseOrder : false;
$scope.sortField = sortField;
};
});
</script>
</body>
</html>
You can try....
Hardik Savani
I'm a full-stack developer, entrepreneur and owner of Aatman Infotech. I live in India and I love to write tutorials and tips that can help to other artisan. I am a big fan of PHP, Laravel, Angular, Vue, Node, Javascript, JQuery, Codeigniter and Bootstrap from the early stage. I believe in Hardworking and Consistency.
