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.