Step 1- Create a new ASP.NET web application.
Step 2- Create a table.html.
Step 3- Add the bootstrap CSS and AngularJS files in CSS and JS folders respectively.
Step 4- Create an images folder and add images in the folder.


Step 5 - Table.html source code can be copied from here.
  1. <!DOCTYPE html>
  2. <html>
  4. <head>
  5. <title></title>
  6. <link href="css/bootstrap.min.css" rel="stylesheet" />
  7. <script src="js/angular.js"></script>
  8. <script>
  9. var obj = angular.module("myApp", []);
  10. obj.controller("EmpController", function($scope) {
  11. //list of data
  12. $scope.array = [{
  13. eno: 1,
  14. ename: "Gururaj",
  15. esal: 17000,
  16. pic: 'guru.jpg'
  17. }, {
  18. eno: 2,
  19. ename: "Bhimashankar",
  20. esal: 30000,
  21. pic: 'bhima.jpg'
  22. }, {
  23. eno: 3,
  24. ename: "Rahul",
  25. esal: 26000,
  26. pic: 'rahul.jpg'
  27. }, {
  28. eno: 4,
  29. ename: "Vishawanath",
  30. esal: 16500,
  31. pic: 'vishwa.jpg'
  32. }, {
  33. eno: 5,
  34. ename: "Laxmikanth",
  35. esal: 15000,
  36. pic: 'laxmi.jpg'
  37. }, {
  38. eno: 6,
  39. ename: "Sachin",
  40. esal: 22000,
  41. pic: 'sachin.jpg'
  42. }, {
  43. eno: 7,
  44. ename: "Bhojaraj",
  45. esal: 15000,
  46. pic: 'bhoju.jpg'
  47. }];
  48. //onmouse over image should be large
  49. $scope.image = 'guru.jpg';
  50. $scope.name = "Gururaj";
  51. $scope.salary = "17000";
  52. $scope.update = function(arg, nme, sal) {
  53. $scope.image = arg;
  54. $scope.name = nme;
  55. $scope.salary = sal;
  56. }
  57. //sort the data through eno properties
  58. $scope.isReverse = false;
  59. $scope.enamesortType = 'ename';
  60. });
  61. </script>
  62. <style>
  63. /*based on even number row color should be change*/
  65. .red {
  66. color: red;
  67. background-color: #efedca;
  68. }
  69. </style>
  70. </head>
  72. <body ng-app="myApp">
  73. <div ng-controller="EmpController">
  74. <div class="container row col-md-12">
  75. <div class="col-md-4">
  76. <h3> Number of Employees : <span class="label label-warning">{{array.length}}</span> </h3>
  77. <h3>Sort by Names</h3> <input id="Text1" type="text" ng-model="Names" />
  78. <!--sortout based on salary -->
  79. <h3>Sort by Salary</h3> <select ng-model="Salary">
  80. <option value="">All</option>
  81. <option>15000</option>
  82. <option>25000</option>
  83. <option>30000</option>
  84. <option>16000</option>
  85. <option>20000</option>
  86. </select>
  87. <!--select number of rows to display-->
  88. <h3> Number of Rows</h3> <select ng-model="scount">
  89. <option>All</option>
  90. <option>2</option>
  91. <option>4</option>
  92. <option>6</option>
  93. <option>8</option>
  94. </select> </div>
  95. <div class="col-md-4">
  96. <table border="1" class="table table-bordered">
  97. <tr class="bg-success">
  98. <th><a href="#" ng-click="isReverse=!isReverse"> E.No</a></th>
  99. <th>Name</th>
  100. <th>Salary</th>
  101. <th>Picture</th>
  102. </tr>
  103. <tr ng-repeat="items in array |filter:Names |filter:Salary |limitTo:scount |orderBy:sortType:isReverse" ng-class-even="{red:true}">
  104. <td>{{items.eno}}</td>
  105. <td>{{items.ename}}</td>
  106. <td>{{items.esal|currency:"₹"}}</td>
  107. <td><img ng-src="img/{{items.pic}}" data-ng-mouseover="update(items.pic,items.ename,items.esal)" style="height:70px; width:70px;border-radius:50%" /></td>
  108. </tr>
  109. </table>
  110. </div>
  111. <div class="col-md-4">
  112. <!--onmouseover image shoule be large--><img ng-src="img/{{image}}" style="height:250px;width:220px;box-shadow:0px 0px 10px green;padding:10px;margin:20px" />
  113. <div class="alert alert-success"> <strong>Employee Name:</strong> {{name}} <strong>Salary:</strong>{{salary}} </div>
  114. </div>
  115. </div>
  116. </div>
  117. </body>
  119. </html>
Step 6 - Run the table.html file in your browser.