Table with Sorting and Searching using AngularJS

I hope, from last article you got basic information about AngularJS. This time, I will demonstrate how to add basic Searching and Sorting capability to data table using AngularJs.

Output will look something like this :

Prerequisite Libraries :

1. UnderscoreJs
2. Bootstrap CSS
3. AngularJs

Complete Html Code :

<div ng-app="myApp">
    <div ng-controller="TableCtrl">
        <div class="input-group">
            <input class="form-control" ng-model="searchText" placeholder="Search" type="search" ng-change="search()" /> <span class="input-group-addon">
      <span class="glyphicon glyphicon-search"></span>
</span>
        </div>
        <table class="table  table-hover data-table sort display">
            <thead>
                <tr>
                    <th class="EmpId"> <a href="" ng-click="columnToOrder='EmpId';reverse=!reverse">EmpId

                         </a>
                    </th>
                    <th class="name"> <a href="" ng-click="columnToOrder='name';reverse=!reverse"> Name </a>
                    </th>
                    <th class="Email"> <a href="" ng-click="columnToOrder='Email';reverse=!reverse"> Email </a>
                    </th>
                </tr>
            </thead>
            <tbody>
                <tr ng-repeat="item in filteredList | orderBy:columnToOrder:reverse">
                    <td>{{item.EmpId}}</td>
                    <td>{{item.name}}</td>
                    <td>{{item.Email}}</td>
                </tr>
            </tbody>
        </table>
        <div class="row">
            <div class="col-xs-3">
                <input type="text" ng-model="newEmpId" class="form-control" placeholder="EmpId">
            </div>
            <div class="col-xs-3">
                <input type="text" ng-model="newName" class="form-control" placeholder="Name">
            </div>
            <div class="col-xs-4">
                <input type="email" ng-model="newEmail" class="form-control" placeholder="Email">
            </div>
            <div class="col-xs-1">
                <button ng-click="add()" type="button" class="btn btn-primary"> <span class="glyphicon glyphicon-plus"></span>

                </button>
            </div>
        </div>
    </div>
    <!-- Ends Controller -->
</div>

I am using Tweeter’s Bootstrap to give required look and feel to my application.

Complete JavaScript code :

//Demo of Searching and Sorting Table with AngularJS
var myApp = angular.module('myApp', []);

myApp.controller('TableCtrl', ['$scope', function ($scope) {

    $scope.allItems = getDummyData();

    $scope.resetAll = function () {
        $scope.filteredList = $scope.allItems;
        $scope.newEmpId = '';
        $scope.newName = '';
        $scope.newEmail = '';
        $scope.searchText = '';
    }

    $scope.add = function () {
        $scope.allItems.push({
            EmpId: $scope.newEmpId,
            name: $scope.newName,
            Email: $scope.newEmail
        });
        $scope.resetAll();
    }

    $scope.search = function () {
        $scope.filteredList = _.filter($scope.allItems,

        function (item) {
            return searchUtil(item, $scope.searchText);
        });

        if ($scope.searchText == '') {
            $scope.filteredList = $scope.allItems;
        }
    }

    $scope.resetAll();
}]);

/* Search Text in all 3 fields */
function searchUtil(item, toSearch) {
    /* Search Text in all 3 fields */
    return (item.name.toLowerCase().indexOf(toSearch.toLowerCase()) > -1 || item.Email.toLowerCase().indexOf(toSearch.toLowerCase()) > -1 || item.EmpId == toSearch) ? true : false;
}

/*Get Dummy Data for Example*/
function getDummyData() {
    return [{
        EmpId: 2,
        name: 'Jitendra',
        Email: 'jz@gmail.com'
    }, {
        EmpId: 1,
        name: 'Minal',
        Email: 'amz@gmail.com'
    }, {
        EmpId: 3,
        name: 'Rudra',
        Email: 'ruz@gmail.com'
    }];
}

JSON data is input to table, which can be replaced by any server side JSON response. So, in case if you need to use this example in Salesforce, You simply have to change “getDummyData()” method and get response using REST API. This article will be helpful if you are looking on how to generate JSON output in Visualforce page.

JavaScript Code Walk-through :

We have Initialized Angular Application by this JS statements

//Initialize Angular JS
var myApp = angular.module('myApp', []);

myApp.controller('TableCtrl', ['$scope', function ($scope) {
      //... code for Controller
}]);

Searching records in table
We have defined “search” function inside Controller which is invoked on every keystroke in search textbox. It is defined using “ng-change” directive in html. “ng-change” will call function declared inside controller every time if Data is changed.

<input class="form-control" ng-model="searchText" placeholder="Search" type="search" ng-change="search()" />

For searching in Controller, we are using “_filter” method of underscoreJs.

 $scope.search = function () {
        $scope.filteredList = _.filter($scope.allItems,

        function (item) {
            return searchUtil(item, $scope.searchText);
        });

        if ($scope.searchText == '') {
            $scope.filteredList = $scope.allItems;
        }
    }

Adding records in table

We have defined “add” function inside Controller which is invoked on click of button using directive “ng-click“. Value is passed to controller using “ng-model” directive defined inside HTML.

<div class="row">
            <div class="col-xs-3">
                <input type="text" ng-model="newEmpId" class="form-control" placeholder="EmpId">
            </div>
            <div class="col-xs-3">
                <input type="text" ng-model="newName" class="form-control" placeholder="Name">
            </div>
            <div class="col-xs-4">
                <input type="email" ng-model="newEmail" class="form-control" placeholder="Email">
            </div>
            <div class="col-xs-1">
                <button ng-click="add()" type="button" class="btn btn-primary"> <span class="glyphicon glyphicon-plus"></span>

                </button>
            </div>
        </div>

//... Inside Controller
$scope.add = function () {
        $scope.allItems.push({
            EmpId: $scope.newEmpId,
            name: $scope.newName,
            Email: $scope.newEmail
        });
        $scope.resetAll();
    }

Sorting records in AngularJs

In this Demo, we have not written any Javascript code for Sorting purpose. We are using inbuilt “Order-By” filter of AngularJs framework as shown below:

       <thead>
                <tr>
                    <th class="EmpId"> <a href="" ng-click="columnToOrder='EmpId';reverse=!reverse">EmpId

                         </a>
                    </th>
                    <th class="name"> <a href="" ng-click="columnToOrder='name';reverse=!reverse"> Name </a>
                    </th>
                    <th class="Email"> <a href="" ng-click="columnToOrder='Email';reverse=!reverse"> Email </a>
                    </th>
                </tr>
            </thead>

Live Working Demo