ArtsAutosBooksBusinessEducationEntertainmentFamilyFashionFoodGamesGenderHealthHolidaysHomeHubPagesPersonal FinancePetsPoliticsReligionSportsTechnologyTravel

How to filter table data,sort and capitalize table content and add pagination using Angular JS

Updated on October 17, 2015

Overview

In part 1 of this series I have explained how to retrieve data from MySql server using PHP OOP (object oriented approach) and display the data using Angular JS .

In this section I am explaining how to :

  • Implement Search Filter
  • Sort table data
  • Capitalize selected table fields
  • Implement Pagination



Implementing the search filter

In order to filter the employee data we need to add the text field with ng-model directive which binds the value of HTML controls to the application data. Our input filter can be added to the ng-repeat directive with a pipe character(|) and filter followed by a colon and a model name.

For implementing the search filter we need to make the following changes to our HTML section.

Filter Data

 <div class="wrap">
    <div ng-app="myApp" ng-controller="empCtrl">
        <div>
            <label for="search">Search:</label>
            <input ng-model="searchemp" id="search" class="form-control" placeholder="Filter text">    
        </div>
        <table class="table table-striped">
            <tr>
                <th>Empno</th>
                <th>EmpName</th>
                <th>Job</th>
                <th>Hire Date</th>
                <th>Salary</th>
                <th >Comm</th>
                <th>Department</th>
            </tr>
            <tr ng-repeat="x in names | filter: searchemp" >
                <td>{{ x.empno }}</td>
                <td>{{ x.ename }}</td>
                <td>{{ x.job }}</td>
                <td>{{ x.hiredate }}</td>
                <td>{{ x.sal | currency :'£' }}</td>
                <td>{{ x.comm | currency :'£' }}</td>
                <td>{{ x.deptname }}</td>
             </tr>
        </table>
    </div>
</div>

Sorting the table data using Angular JS

In this step I am going to explain how to sort the table data by clicking the table’s header. Angular JS has an in built function for sorting the data. However in our example we need to sort float values (currencies) as well. So I have created a custom sort function ` SetSort()` for achieving that.

Sort function Angular JS

$scope.SetSort = function (objName , isCurrency) {
        $scope.predicate = objName;
        $scope.reverse = !$scope.reverse;
}

ng-click event

The ng-click event defines an AngularJS click event. So we add ng-click directive to the table header and call our custom sort function ‘SetSort()’ on the table header click event as shown in the code below.

<table class="table table-striped">
  <tr>
   <th ng-click="SetSort('empno');">Empno</th>
   <th ng-click="SetSort('ename');">EmpName</th>
   <th ng-click="SetSort('job');">Job</th>
   <th ng-click="SetSort('hiredate');">Hire Date</th>
   <th ng-click="SetSort('sal','currency');">Salary</th>
   <th ng-click="SetSort('comm','currency');">Comm</th>
   <th ng-click="SetSort('deptname');">Department</th>
  </tr>
  <tr ng-repeat="x in names  | orderBy:predicate:reverse" >
                    <td>{{ x.empno }}</td>
                    <td>{{ x.ename }}</td>
                    <td>{{ x.job }}</td>
                    <td>{{ x.hiredate }}</td>
                    <td>{{ x.sal | currency :'£' }}</td>
                    <td>{{ x.comm | currency :'£' }}</td>
                    <td>{{ x.deptname }}</td>
                  </tr>
            </table>

How to sort currencies/float values using Angular JS

You may have noticed that the salary and the commission fields are not sorting correctly. We need to convert the string values to float values.

In our example salary and commission fields are decimal values but its treated as a string value and hence it isn't sorting correctly.So we need to typecast those values to float before sorting as shown below.


SetSort() Function

$scope.SetSort = function (objName , isCurrency) {
        $scope.predicate = objName;
        $scope.reverse = !$scope.reverse;
        if(angular.isDefined(isCurrency)) {
            angular.forEach($scope.names, function (obj) {
            for(var i in obj )
            {
               if(i == objName && obj[i] != '') 
                  obj[i] =  parseFloat(obj[i]);       
            }
           });
        }
    }

Demotable

Capitalize Filter Using Angular JS

In the above figure we have noticed that the ‘EmpName’,`Job` and the `Department` values are displayed in the uppercase format. If we want to `capitalize` the fields data we need to add a filter as shown below.

Capitalize Filter

app.filter('capitalize', function() {
    return function(input) {
      return (!!input) ? input.charAt(0).toUpperCase() + input.substr(1).toLowerCase() : '';
    }
  });

Add Pagination using AngularJS

We can use the following pagination directive to implement the pagination.

HTML Changes

In the header section:

Include the ‘dirPagination.js` file

In the body section:

  1. Add ` itemsPerPage:pageSize` in the filter section as shown below
  2. Replace `ng-repeat` with ` dir-paginate `
  3. Also add the dir-pagination-controls after the </table>

<div class="wrap">
    <div ng-app="myApp" ng-controller="empCtrl">
     <div>
        <label for="search">Search:</label>
	<input ng-model="searchemp" id="search" class="form-control" placeholder="Filter text">    
            </div>
            <table class="table table-striped">
        <tr>
      <th ng-click="SetSort('empno');">Empno</th>
      <th ng-click="SetSort('ename');">EmpName</th>
      <th ng-click="SetSort('job');">Job</th>
      <th ng-click="SetSort('hiredate');">Hire Date</th>
      <th ng-click="SetSort('sal','currency');">Salary</th>
      <th ng-click="SetSort('comm','currency');">Comm</th>
      <th ng-click="SetSort('deptname');">Department</th>
  </tr>
          <tr dir-paginate="x in names | filter: searchemp | orderBy:predicate:reverse | itemsPerPage:pageSize" current-page="currentPage" >
            <td>{{ x.empno }}</td>
            <td>{{ x.ename }}</td>
            <td>{{ x.job }}</td>
            <td>{{ x.hiredate }}</td>
            <td>{{ x.sal | currency :'£' }}</td>
            <td>{{ x.comm | currency :'£' }}</td>
            <td>{{ x.deptname }}</td>
          </tr>
    </table>
            <dir-pagination-controls  template-url="js/dirPagination.tpl.html" direction-links="true" boundary-links="true"></dir-pagination-controls>
    </div>
</div>

Angular JS Changes:

  1. First include the pagination module in the application [ var app = angular.module('myApp', ['angularUtils.directives.dirPagination']); ]
  2. Set the `currentPage` and `pageSize` inside the app.controller function

Final Code

var app = angular.module('myApp', ['angularUtils.directives.dirPagination']);

app.controller('empCtrl', function($scope, $http) {
    $scope.orderByField = 'empno';
    $scope.reverseSort = false;
    $scope.currentPage = 1;
    $scope.pageSize = 5;
        $http.get("display.php")
        .success(function (response) {
            $scope.names = response;
        });
        
    $scope.SetSort = function (objName , isCurrency) {
        $scope.predicate = objName;
        $scope.reverse = !$scope.reverse;
        if(angular.isDefined(isCurrency)) {
            angular.forEach($scope.names, function (obj) {
            for(var i in obj )
            {
               if(i == objName && obj[i] != '') 
                  obj[i] =  parseFloat(obj[i]);       
            }
           });
        }
    }
});

Comments

    0 of 8192 characters used
    Post Comment

    No comments yet.

    Click to Rate This Article