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.

    working

    This website uses cookies

    As a user in the EEA, your approval is needed on a few things. To provide a better website experience, hubpages.com uses cookies (and other similar technologies) and may collect, process, and share personal data. Please choose which areas of our service you consent to our doing so.

    For more information on managing or withdrawing consents and how we handle data, visit our Privacy Policy at: https://hubpages.com/privacy-policy#gdpr

    Show Details
    Necessary
    HubPages Device IDThis is used to identify particular browsers or devices when the access the service, and is used for security reasons.
    LoginThis is necessary to sign in to the HubPages Service.
    Google RecaptchaThis is used to prevent bots and spam. (Privacy Policy)
    AkismetThis is used to detect comment spam. (Privacy Policy)
    HubPages Google AnalyticsThis is used to provide data on traffic to our website, all personally identifyable data is anonymized. (Privacy Policy)
    HubPages Traffic PixelThis is used to collect data on traffic to articles and other pages on our site. Unless you are signed in to a HubPages account, all personally identifiable information is anonymized.
    Amazon Web ServicesThis is a cloud services platform that we used to host our service. (Privacy Policy)
    CloudflareThis is a cloud CDN service that we use to efficiently deliver files required for our service to operate such as javascript, cascading style sheets, images, and videos. (Privacy Policy)
    Google Hosted LibrariesJavascript software libraries such as jQuery are loaded at endpoints on the googleapis.com or gstatic.com domains, for performance and efficiency reasons. (Privacy Policy)
    Features
    Google Custom SearchThis is feature allows you to search the site. (Privacy Policy)
    Google MapsSome articles have Google Maps embedded in them. (Privacy Policy)
    Google ChartsThis is used to display charts and graphs on articles and the author center. (Privacy Policy)
    Google AdSense Host APIThis service allows you to sign up for or associate a Google AdSense account with HubPages, so that you can earn money from ads on your articles. No data is shared unless you engage with this feature. (Privacy Policy)
    Google YouTubeSome articles have YouTube videos embedded in them. (Privacy Policy)
    VimeoSome articles have Vimeo videos embedded in them. (Privacy Policy)
    PaypalThis is used for a registered author who enrolls in the HubPages Earnings program and requests to be paid via PayPal. No data is shared with Paypal unless you engage with this feature. (Privacy Policy)
    Facebook LoginYou can use this to streamline signing up for, or signing in to your Hubpages account. No data is shared with Facebook unless you engage with this feature. (Privacy Policy)
    MavenThis supports the Maven widget and search functionality. (Privacy Policy)
    Marketing
    Google AdSenseThis is an ad network. (Privacy Policy)
    Google DoubleClickGoogle provides ad serving technology and runs an ad network. (Privacy Policy)
    Index ExchangeThis is an ad network. (Privacy Policy)
    SovrnThis is an ad network. (Privacy Policy)
    Facebook AdsThis is an ad network. (Privacy Policy)
    Amazon Unified Ad MarketplaceThis is an ad network. (Privacy Policy)
    AppNexusThis is an ad network. (Privacy Policy)
    OpenxThis is an ad network. (Privacy Policy)
    Rubicon ProjectThis is an ad network. (Privacy Policy)
    TripleLiftThis is an ad network. (Privacy Policy)
    Say MediaWe partner with Say Media to deliver ad campaigns on our sites. (Privacy Policy)
    Remarketing PixelsWe may use remarketing pixels from advertising networks such as Google AdWords, Bing Ads, and Facebook in order to advertise the HubPages Service to people that have visited our sites.
    Conversion Tracking PixelsWe may use conversion tracking pixels from advertising networks such as Google AdWords, Bing Ads, and Facebook in order to identify when an advertisement has successfully resulted in the desired action, such as signing up for the HubPages Service or publishing an article on the HubPages Service.
    Statistics
    Author Google AnalyticsThis is used to provide traffic data and reports to the authors of articles on the HubPages Service. (Privacy Policy)
    ComscoreComScore is a media measurement and analytics company providing marketing data and analytics to enterprises, media and advertising agencies, and publishers. Non-consent will result in ComScore only processing obfuscated personal data. (Privacy Policy)
    Amazon Tracking PixelSome articles display amazon products as part of the Amazon Affiliate program, this pixel provides traffic statistics for those products (Privacy Policy)