Post
Ask Question

Table With Sorting Using AngularJS

In this blog, I'm going to show you how to create a simple table like a datatable kind of functionality using AngularJS.
 
Like jQuery DataTable, my demo also includes, 
  1. Sorting By Name
  2. Searching of Data  
For that, I have used AngularJS script file as followed.
  1. <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>  
And also, I have used some of the bootstrap script and style files
  1. <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">  
  2. <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>  
  3. <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>  
Some of the Angular concepts that I have used are listed below.
  •  ng-app - Tells that it is a root element of AngularJs Application
  •  ng-controller - Invokes by $Scope
  •  ng-model - Binds input field to a variable
  •  ng-click - Defines what we should do when an element is clicked 
Here, you can find the source code of what I have developed.
  1. <body>  
  2. <div class="container">  
  3.     <div ng-app="myApp" ng-controller="namesCtrl" ng-init="IsReverse=false">  
  4.     Search: <input type="text" ng-model="test"><br>  
  5.     <table class="table table-hover table-bordered table-striped">  
  6.       
  7.       <tr>  
  8.           <th ng-click="sort('Name')">Name  
  9.           <th ng-click="sort('Age')">Age  
  10.           <th ng-click="sort('Email')">Email  
  11.           <th>Actions</th>  
  12.       </tr>  
  13.       <tr ng-repeat="x in names | filter:test | orderBy:sortParam:IsReverse">  
  14.           <td>{{x.Name}}  
  15.           <td>{{x.Age}}  
  16.           <td>{{x.Email}}  
  17.           <td>  
  18.             <div class="btn-group">  
  19.                 <a class="btn btn-primary" href="#">EDIT</a>  
  20.                 <a class="btn btn-primary" href="#">DELETE</a>  
  21.             </div>  
  22.           </td>  
  23.       </tr>  
  24.       </table>  
  25.   
  26. </div>  
  27.   
  28. <script>  
  29. angular.module('myApp', []).controller('namesCtrl', function($scope) {  
  30.   
  31.     $scope.names = [  
  32.         {Name:'Manav',Age:'22',Email:'[email protected]'},  
  33.         {Name:'Rahul',Age:'25',Email:'[email protected]'},  
  34.         {Name:'Rohan',Age:'28',Email:'[email protected]'},  
  35.         {Name:'Jinish',Age:'18',Email:'[email protected]'}
  36.     ];  
  37.   
  38.     $scope.sort = function(sortId) {  
  39.         $scope.sortParam =  sortId;  
  40.         if($scope.IsReverse)  
  41.         {  
  42.             $scope.IsReverse = false;  
  43.         }  
  44.         else  
  45.         {  
  46.             $scope.IsReverse = true;  
  47.         }  
  48.   
  49.     };  
  50.   
  51. });  
  52. </script>  
  53. </body>   
As you can see, the Controller will be invoked by calling Using.
  1. controller('namesCtrl', function($scope)  
Primary output of my code is as follows:
 
 And for searching , you can see output after I have searched "Manav;" the data will be filtered :
 
 
 
 
That's all for now. You can try and enhance it by adding more functionality like pagination or total item count etc.
 
Thanks for reading.
Next Recommended Reading Sorting, Paging And Filter Grid Using AngularJS