Post
Ask Question

AngularJS Table Sorting Filter And Paging With Static Data

Introduction

This post provides an example about how to create a table via sorting, filter and paging. Following directives and services in AngularJS will be used.

  • orderby
  • filter
  • ng-click
  • ng-model
  • ng-repeat
I have declared AngularJS Reference. 
  1. <title>Anular Js Filter Example </title>    
  2.   <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">    
  3.   <script src="http://code.angularjs.org/1.4.8/angular.js"></script>    
  4.   <script src="http://code.angularjs.org/1.4.8/angular-resource.js"></script>    
  5.   <script src="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.11.0.js"></script>     
Now, I created Angular Model, controller, filter, as shown below. 
  1. <script>    
  2.     var app = angular.module('MyForm', ['ui.bootstrap', 'ngResource']);    
  3.     app.controller('myCtrl', function ($scope) {    
  4.       $scope.predicate = 'name';    
  5.       $scope.reverse = true;    
  6.       $scope.currentPage = 1;    
  7.       $scope.order = function (predicate) {    
  8.         $scope.reverse = ($scope.predicate === predicate) ? !$scope.reverse : false;    
  9.         $scope.predicate = predicate;    
  10.       };    
  11.       $scope.students = [    
  12.         { name: 'Thennarasu', age: 24, gender: 'boy',city:'Madurai',Designation:'MCA' },    
  13.         { name: 'Karthik', age: 25, gender: 'boy',city:'Theni',Designation:'BE' },    
  14.         { name: 'Tony', age: 25, gender: 'boy',city:'Erode',Designation:'MCA' },    
  15.         { name: 'Jose', age: 27, gender: 'boy',city:'Kanyakumari',Designation:'MBA' },    
  16.         { name: 'Viji', age: 26, gender: 'Girl',city:'TenKasi',Designation:'BSC' },    
  17.         { name: 'Prem', age: 25, gender: 'boy',city:'Chennai',Designation:'MBA' },    
  18.         { name: 'Senni', age: 30, gender: 'boy',city:'Madurai',Designation:'MCA' },    
  19.         { name: 'Mano', age: 27, gender: 'boy',city:'Madurai',Designation:'MCA'},    
  20.         { name: 'KarthuPandi', age: 25, gender: 'boy',city:'Theni',Designation:'BE' },    
  21.           
  22.       ];    
  23.       $scope.totalItems = $scope.students.length;    
  24.       $scope.numPerPage = 5;    
  25.       $scope.paginate = function (value) {    
  26.         var begin, end, index;    
  27.         begin = ($scope.currentPage - 1) * $scope.numPerPage;    
  28.         end = begin + $scope.numPerPage;    
  29.         index = $scope.students.indexOf(value);    
  30.         return (begin <= index && index < end);    
  31.       };    
  32.     });    
  33.   </script>     
Style of Grid View Data is shown below. 
  1. <style>    
  2.      .odd {    
  3.        background-color: Yellow;    
  4.        color: #008b8b;    
  5.      }    
  6.      td th {    
  7.        height: 30px;    
  8.        min-width: 100px;    
  9.      }    
  10.      thead {    
  11.        background-color: darkgray;    
  12.        color: white;    
  13.        height: 30px;    
  14.      }    
  15.    </style>    
Finally HTML Mark up code looks, as shown below.         
  1. <body ng-app="MyForm">    
  2.   <div ng-controller="myCtrl">    
  3.     <h3>List students</h3>    
  4.     <div class="container-fluid">    
  5.        
  6.       <hr />    
  7.       <table class="table table-striped">    
  8.         <thead>    
  9.           <tr>    
  10.                 
  11.             <th>    
  12.               <a href="" ng-click="order('name')">Name</a>    
  13.             </th>    
  14.             <th><a href="" ng-click="order('age')"> Age</a> </th>    
  15.             <th><a href="" ng-click="order('gender')">Gender</a> </th>    
  16.           <th><a href="" ng-click="order('city')"> City</a> </th>    
  17.             <th><a href="" ng-click="order('Designation')">Designation</a> </th>    
  18.           </tr>    
  19.         </thead>    
  20.         <tbody>    
  21.           <tr>    
  22.               
  23.             <td> <input type="text" ng-model="search.name" /></td>    
  24.             <td> <input type="text" ng-model="search.age" /> </td>    
  25.             <td><input type="text" ng-model="search.gender" /> </td>    
  26.          <td><input type="text" ng-model="search.city"/></td>  
  27.          <td><input type="text" ng-model="search.Designation"/></td>  
  28.           </tr>    
  29.           <tr ng-repeat="user in students | orderBy:predicate:reverse | filter:paginate| filter:search" ng-class-odd="'odd'">    
  30.               
  31.             <td>{{ user.name}}</td>    
  32.             <td>{{ user.age}}</td>    
  33.             <td>{{ user.gender}}</td>    
  34.          <td>{{ user.city}}</td>  
  35.              <td>{{ user.Designation}}</td>                
  36.           </tr>    
  37.         </tbody>    
  38.       </table>    
  39.      <!--  <pagination total-items="totalItems" ng-model="currentPage"    
  40.             max-size="5" boundary-links="true"    
  41.             items-per-page="numPerPage" class="pagination-sm">    
  42.       </pagination> -->    
  43.    <pagination total-items="total-items" ng-model="currentPage"  
  44.    max-size="5" boundary-links="true"  
  45.    items-per-page="numPerPage" class="pagination-sm">  
  46.     </div>    
  47.   </div>    
  48. </body>      
After run ningthe code, the output will look, as shown below.
 
Full data showing Table  


After entering the value, Filter Box shows the result, as shown below.
Finally Pagination Data will look as follows..

Summary

Finally, you have learned how to create a table via sorting, filtering and paging.
Next Recommended Reading Sorting, Paging And Filter Grid Using AngularJS