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">
  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>
  26. </div>
  28. <script>
  29. angular.module('myApp', []).controller('namesCtrl', function($scope) {
  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. ];
  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. }
  49. };
  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.