Post
Ask Question

Sorting, Paging And Filter Grid Using AngularJS

Now, I am going to explain how can we achieve paging, sorting, and filter in grid by using ng-table API of AngularJS. In this article we will replace some code with the previous tutorial so please download the code of the previous article or you can follow the previous article in order to achieve this.

The functionality we will achieve after doing this article:

  1. Paging
  2. Sorting
  3. Filtering

Let’s start step by step so that we can achieve our objective at the end of this article. After completing this demo our application should look like this:

table

  1. Include this package in your existing application:

    a) ngTable

    It supports sorting, filtering, and pagination. Header row with titles and filters are automatically generated on compilation step.

  2. Add the highlighted reference in your Index.cshtml file. This will add the reference of ngTable API of AngularJS in our application. After adding this onlythen can  we can use its sorting, paging, and filter features.
    1. @{  
    2.     Layout = null;  
    3. }  
    4.   
    5.   
    6. <!DOCTYPE html>  
    7. <html ng-app="EmpApp">  
    8.     <head>  
    9.         <meta name="viewport" content="width=device-width" />  
    10.         <title>Index</title>  
    11.         <link href="@Url.Content("~/Content/bootstrap.min.css")" rel="stylesheet"type="text/css" />  
    12.         <link href="@Url.Content("~/Content/ng-table.css")" rel="stylesheet"type="text/css" />  
    13.         <script src="@Url.Content("~/Scripts/angular.min.js")" type="text/javascript"></script>  
    14.         <script src="@Url.Content("~/Scripts/angular-route.js")"type="text/javascript"></script>  
    15.         <script src="@Url.Content("~/Scripts/ng-table.min.js")"type="text/javascript"></script>  
    16.         <script src="@Url.Content("~/Scripts/app/app.js")" type="text/javascript"></script>  
    17.         <script src="@Url.Content("~/Scripts/app/controller.js")"type="text/javascript"></script>  
    18.     </head>  
    19.     <body>  
    20.         <div class="main container" ng-view></div>  
    21.     </body>  
    22. </html>  
  3. In list.html, replace the code with the following. I highlighted some of the changed parts so it will be easy for us identity the code of functionalities given by this tutorial.
    1. <div>  
    2.     <a href="#/create" class="btn">Create</a>  
    3. </div>  
    4. <div class="row">  
    5.     <div class="col-lg-offset-8 col-lg-4">  
    6.         <input type="text" class="form-control" placeholder="Search for..." ng-model="search" />  
    7.     </div>  
    8. </div>  
    9. <hr />  
    10. <div class="table-responsive">  
    11.     <p class="text-right">  
    12.         <strong>Page:</strong> {{tableParams.page()}},   
    13.         <strong>Count per page:</strong>  
    14.         {{tableParams.count()}}  
    15.     </p>  
    16.     <table class="table table-striped table-bordered" ng-table="tableParams"template-pagination="custom/pager">  
    17.         <tr ng-repeat="item in $data | filter:search">  
    18.             <td data-title="'Employee Id'" sortable="'EmployeeId'">  
    19.                 {{ item.EmployeeId }}  
    20.             </td>  
    21.             <td data-title="'First Name'" sortable="'FirstName'">  
    22.                 {{ item.FirstName }}  
    23.             </td>  
    24.             <td data-title="'Last Name'" sortable="'LastName'">  
    25.                 {{ item.LastName }}  
    26.             </td>  
    27.             <td data-title="'Description'">  
    28.                 {{ item.Description }}  
    29.             </td>  
    30.             <td data-title="'Salary'" sortable="'Salary'">  
    31.                 {{ item.Salary | number: 2 }}  
    32.             </td>  
    33.             <td data-title="'Country'" sortable="'Country'">  
    34.                 {{ item.Country }}  
    35.             </td>  
    36.             <td data-title="'State'" sortable="'State'">  
    37.                 {{ item.State }}  
    38.             </td>  
    39.             <td data-title="'Date of Birth'" sortable="'DateofBirth'">  
    40.                 {{ item.DateofBirth | date }}  
    41.             </td>  
    42.             <td data-title="'Is Active'">  
    43.                 <span class="label" ng-class="{true:'label-success', false:'label-danger', '':'hidden'}[item.IsActive]">  
    44.                 {{ item.IsActive ? 'Active' : 'In Active' }}</span>  
    45.             </td>  
    46.             <td>  
    47.                 <a href="#/edit/{{item.EmployeeId}}" class="glyphicon glyphicon-edit"></a>  
    48.             </td>  
    49.             <td>  
    50.                 <a href="#/delete/{{item.EmployeeId}}" class="glyphicon glyphicon-trash"></a>  
    51.             </td>  
    52.         </tr>  
    53.     </table>  
    54.     <script type="text/ng-template" id="custom/pager">  
    55.         <ul class="pager ng-cloak">  
    56.             <li ng-repeat="page in pages"  
    57.                 ng-class="{'disabled': !page.active, 'previous': page.type == 'prev', 'next': page.type == 'next'}"  
    58.                 ng-show="page.type == 'prev' || page.type == 'next'" ng-switch="page.type">  
    59.                 <a ng-switch-when="prev" ng-click="params.page(page.number)" href="">« Previous</a>  
    60.                 <a ng-switch-when="next" ng-click="params.page(page.number)" href="">Next »</a>  
    61.             </li>  
    62.             <li>  
    63.                 <div class="btn-group">  
    64.                     <button type="button" ng-class="{'active':params.count() == 5}" ng-click="params.count(5)" class="btn btn-default">5</button>  
    65.                     <button type="button" ng-class="{'active':params.count() == 10}" ng-click="params.count(10)" class="btn btn-default">10</button>  
    66.                     <button type="button" ng-class="{'active':params.count() == 20}" ng-click="params.count(20)" class="btn btn-default">20</button>  
    67.                     <button type="button" ng-class="{'active':params.count() == 50}" ng-click="params.count(50)" class="btn btn-default">50</button>  
    68.                 </div>  
    69.             </li>  
    70.         </ul>  
    71.     </script>  
    72. </div>  
  4. In controller.js, only replace declaration section of EmpControllers and ListController definition.
    1. var EmpControllers = angular.module("EmpControllers", ['ngTable']);  
    2. // this controller call the api method and display the list of employees  
    3. // in list.html  
    4. EmpControllers.controller("ListController", ['$scope', '$http', '$filter', 'ngTableParams',  
    5.     function($scope, $http, $filter, ngTableParams)  
    6.     {  
    7.         $scope.headers = [  
    8.         {  
    9.             column: "FirstName"  
    10.         },  
    11.         {  
    12.             column: "LastName"  
    13.         }];  
    14.         $http.get('/api/employee').success(function(data)  
    15.         {  
    16.             $scope.tableParams = new ngTableParams(  
    17.             {  
    18.                 page: 1, // show first page  
    19.                 count: 5, // count per page  
    20.                 sorting:  
    21.                 {  
    22.                     EmployeeId: 'asc' // initial sorting  
    23.                 }  
    24.             },  
    25.             {  
    26.                 total: data.length,  
    27.                 getData: function($defer, params)  
    28.                 {  
    29.                     var orderedData = params.sorting() ? $filter('orderBy')(data, params.orderBy()) : data;  
    30.                     $defer.resolve(orderedData.slice((params.page() - 1) * params.count(), params.page() * params.count()));  
    31.                 }  
    32.             });  
    33.         });  
    34.     }  
    35. ]);  

Thanks for reading this article. I hope this will help you. If you have any suggestion or feedback please provide by using the comment box.