{"id":3745,"date":"2014-02-22T07:55:44","date_gmt":"2014-02-22T02:25:44","guid":{"rendered":"http:\/\/JitendraZaa.com\/blog\/?p=3745"},"modified":"2014-02-22T07:55:44","modified_gmt":"2014-02-22T02:25:44","slug":"table-with-sorting-and-searching-using-angularjs","status":"publish","type":"post","link":"https:\/\/www.jitendrazaa.com\/blog\/webtech\/web\/table-with-sorting-and-searching-using-angularjs\/","title":{"rendered":"Table with Sorting and Searching using AngularJS"},"content":{"rendered":"

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

Output will look something like this :<\/p>\n

\"Searching<\/a>
Searching and Sorting in Table using AngularJS<\/figcaption><\/figure>\n

Prerequisite Libraries :<\/p>\n

    \n
  1. UnderscoreJs<\/a><\/li>\n
  2. Bootstrap CSS<\/a><\/li>\n
  3. AngularJs<\/a><\/li>\n<\/ol>\n

    <\/p>\n

    Complete Html Code :<\/strong><\/p>\n

    \n\n<div ng-app="myApp">\n    <div ng-controller="TableCtrl">\n        <div class="input-group">\n            <input class="form-control" ng-model="searchText" placeholder="Search" type="search" ng-change="search()" \/> <span class="input-group-addon">\n      <span class="glyphicon glyphicon-search"><\/span>\n<\/span>\n        <\/div>\n        <table class="table  table-hover data-table sort display">\n            <thead>\n                <tr>\n                    <th class="EmpId"> <a href="" ng-click="columnToOrder='EmpId';reverse=!reverse">EmpId\n\n                         <\/a>\n                    <\/th>\n                    <th class="name"> <a href="" ng-click="columnToOrder='name';reverse=!reverse"> Name <\/a>\n                    <\/th>\n                    <th class="Email"> <a href="" ng-click="columnToOrder='Email';reverse=!reverse"> Email <\/a>\n                    <\/th>\n                <\/tr>\n            <\/thead>\n            <tbody>\n                <tr ng-repeat="item in filteredList | orderBy:columnToOrder:reverse">\n                    <td>{{item.EmpId}}<\/td>\n                    <td>{{item.name}}<\/td>\n                    <td>{{item.Email}}<\/td>\n                <\/tr>\n            <\/tbody>\n        <\/table>\n        <div class="row">\n            <div class="col-xs-3">\n                <input type="text" ng-model="newEmpId" class="form-control" placeholder="EmpId">\n            <\/div>\n            <div class="col-xs-3">\n                <input type="text" ng-model="newName" class="form-control" placeholder="Name">\n            <\/div>\n            <div class="col-xs-4">\n                <input type="email" ng-model="newEmail" class="form-control" placeholder="Email">\n            <\/div>\n            <div class="col-xs-1">\n                <button ng-click="add()" type="button" class="btn btn-primary"> <span class="glyphicon glyphicon-plus"><\/span>\n\n                <\/button>\n            <\/div>\n        <\/div>\n    <\/div>\n    <!-- Ends Controller -->\n<\/div>\n<\/pre>\n
    I am using Tweeter’s Bootstrap to give required look and feel to my application.<\/p>\n
    Complete JavaScript code :<\/strong><\/p>\n
    \n\/\/Demo of Searching and Sorting Table with AngularJS\nvar myApp = angular.module('myApp', []);\n\nmyApp.controller('TableCtrl', ['$scope', function ($scope) {\n\n    $scope.allItems = getDummyData();\n\n    $scope.resetAll = function () {\n        $scope.filteredList = $scope.allItems;\n        $scope.newEmpId = '';\n        $scope.newName = '';\n        $scope.newEmail = '';\n        $scope.searchText = '';\n    }\n\n    $scope.add = function () {\n        $scope.allItems.push({\n            EmpId: $scope.newEmpId,\n            name: $scope.newName,\n            Email: $scope.newEmail\n        });\n        $scope.resetAll();\n    }\n\n    $scope.search = function () {\n        $scope.filteredList = _.filter($scope.allItems,\n\n        function (item) {\n            return searchUtil(item, $scope.searchText);\n        });\n\n        if ($scope.searchText == '') {\n            $scope.filteredList = $scope.allItems;\n        }\n    }\n\n    $scope.resetAll();\n}]);\n\n\/* Search Text in all 3 fields *\/\nfunction searchUtil(item, toSearch) {\n    \/* Search Text in all 3 fields *\/\n    return (item.name.toLowerCase().indexOf(toSearch.toLowerCase()) > -1 || item.Email.toLowerCase().indexOf(toSearch.toLowerCase()) > -1 || item.EmpId == toSearch) ? true : false;\n}\n\n\/*Get Dummy Data for Example*\/\nfunction getDummyData() {\n    return [{\n        EmpId: 2,\n        name: 'Jitendra',\n        Email: 'jz@gmail.com'\n    }, {\n        EmpId: 1,\n        name: 'Minal',\n        Email: 'amz@gmail.com'\n    }, {\n        EmpId: 3,\n        name: 'Rudra',\n        Email: 'ruz@gmail.com'\n    }];\n}\n<\/pre>\n
    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<\/em>, You simply have to change “getDummyData()<\/em>” 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<\/a>.<\/p>\n
    JavaScript Code Walk-through :<\/strong><\/p>\n
    We have Initialized Angular Application by this JS statements<\/p>\n
    \n\n\/\/Initialize Angular JS\nvar myApp = angular.module('myApp', []);\n\nmyApp.controller('TableCtrl', ['$scope', function ($scope) {\n      \/\/... code for Controller\n}]);\n<\/pre>\n
    Searching records in table<\/strong>
    \nWe have defined “search<\/em>” function inside Controller which is invoked on every keystroke in search textbox. It is defined using “ng-change”<\/strong> directive in html. “ng-change” will call function declared inside controller every time if Data is changed.<\/p>\n
    \n<input class="form-control" ng-model="searchText" placeholder="Search" type="search" ng-change="search()" \/>\n<\/pre>\n
    For searching in Controller, we are using “_filter” method of underscoreJs.<\/p>\n
    \n $scope.search = function () {\n        $scope.filteredList = _.filter($scope.allItems,\n\n        function (item) {\n            return searchUtil(item, $scope.searchText);\n        });\n\n        if ($scope.searchText == '') {\n            $scope.filteredList = $scope.allItems;\n        }\n    }\n<\/pre>\n
    Adding records in table <\/strong><\/p>\n
    We have defined “add<\/em>” function inside Controller which is invoked on click of button using directive “ng-click<\/em>“. Value is passed to controller using “ng-model<\/em>” directive defined inside HTML.<\/p>\n
    \n<div class="row">\n            <div class="col-xs-3">\n                <input type="text" ng-model="newEmpId" class="form-control" placeholder="EmpId">\n            <\/div>\n            <div class="col-xs-3">\n                <input type="text" ng-model="newName" class="form-control" placeholder="Name">\n            <\/div>\n            <div class="col-xs-4">\n                <input type="email" ng-model="newEmail" class="form-control" placeholder="Email">\n            <\/div>\n            <div class="col-xs-1">\n                <button ng-click="add()" type="button" class="btn btn-primary"> <span class="glyphicon glyphicon-plus"><\/span>\n\n                <\/button>\n            <\/div>\n        <\/div>\n<\/pre>\n
    \n\/\/... Inside Controller\n$scope.add = function () {\n        $scope.allItems.push({\n            EmpId: $scope.newEmpId,\n            name: $scope.newName,\n            Email: $scope.newEmail\n        });\n        $scope.resetAll();\n    }\n<\/pre>\n
    Sorting records in AngularJs<\/strong><\/p>\n
    In this Demo, we have not written any Javascript code for Sorting purpose. We are using inbuilt “Order-By<\/a>” filter of AngularJs framework as shown below:<\/p>\n
    \n       <thead>\n                <tr>\n                    <th class="EmpId"> <a href="" ng-click="columnToOrder='EmpId';reverse=!reverse">EmpId\n\n                         <\/a>\n                    <\/th>\n                    <th class="name"> <a href="" ng-click="columnToOrder='name';reverse=!reverse"> Name <\/a>\n                    <\/th>\n                    <th class="Email"> <a href="" ng-click="columnToOrder='Email';reverse=!reverse"> Email <\/a>\n                    <\/th>\n                <\/tr>\n            <\/thead>\n<\/pre>\n
    Live Working Demo <\/a><\/strong><\/p>\n","protected":false},"excerpt":{"rendered":"
    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 : UnderscoreJs Bootstrap CSS AngularJs<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"advanced_seo_description":"","jetpack_seo_html_title":"","jetpack_seo_noindex":false,"jetpack_post_was_ever_published":false,"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"jz_research_post":"","_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[26],"tags":[35,49,109,136,147,331,336],"class_list":["post-3745","post","type-post","status-publish","format-standard","hentry","category-web","tag-angularjs","tag-bootstrap","tag-google","tag-json","tag-mvc","tag-salesforce","tag-visualforce"],"jetpack_featured_media_url":"","jetpack_sharing_enabled":true,"jetpack-related-posts":[{"id":3751,"url":"https:\/\/www.jitendrazaa.com\/blog\/webtech\/web\/pagination-and-sorting-of-data-table-using-angularjs\/","url_meta":{"origin":3745,"position":0},"title":"Pagination, Searching and Sorting of Data Table  using AngularJS","author":"Jitendra Zaa","date":"February 22, 2014","format":false,"excerpt":"We have already discussed \"Basics of AngularJS\" and \"Simple Searching and Sorting\". In this article, we will add Pagination feature also to our previous example. What makes difficult is Sorting result when values are returned from Search and pagination is enabled. Unlike previous post we cannot use standard \"OrderBy\" filter\u2026","rel":"","context":"In "HTML"","block_context":{"text":"HTML","link":"https:\/\/www.jitendrazaa.com\/blog\/category\/webtech\/web\/"},"img":{"alt_text":"Searching Sorting and Pagination in Table using AngularJS","src":"https:\/\/i0.wp.com\/jitendrazaa.com\/blog\/wp-content\/uploads\/2014\/02\/Searching-Sorting-and-Pagination-in-Table-using-AngularJS-300x156.png?resize=350%2C200&ssl=1","width":350,"height":200},"classes":[]},{"id":3951,"url":"https:\/\/www.jitendrazaa.com\/blog\/salesforce\/creating-salesforce-query-builder-in-node-js-and-angularjs-using-salesforce-rest-api-and-oauth2\/","url_meta":{"origin":3745,"position":1},"title":"Creating Salesforce Query Builder in Node.js and AngularJs using Salesforce REST API and OAuth2 with Heroku Button","author":"Jitendra","date":"August 18, 2014","format":false,"excerpt":"In this post, we will be creating a\u00a0Salesforce Query (SOQL) Builder.\u00a0It uses Google's Angularjs MVC Javascript library and REST API provided by Salesforce. For Authentication, it uses OAuth2. Node.js is used as a primary language and hosted on Heroku. If you want to directly deploy to your Heroku Account, You\u2026","rel":"","context":"In "HTML"","block_context":{"text":"HTML","link":"https:\/\/www.jitendrazaa.com\/blog\/category\/webtech\/web\/"},"img":{"alt_text":"SOQL Builder Using Node.js AngularJs Salesforce REST API on Heroku","src":"https:\/\/i0.wp.com\/www.jitendrazaa.com\/blog\/wp-content\/uploads\/2014\/08\/SOQL-Builder-Using-Node.js-AngularJs-Salesforce-REST-API-on-Heroku-1024x504.png?resize=350%2C200&ssl=1","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/www.jitendrazaa.com\/blog\/wp-content\/uploads\/2014\/08\/SOQL-Builder-Using-Node.js-AngularJs-Salesforce-REST-API-on-Heroku-1024x504.png?resize=350%2C200&ssl=1 1x, https:\/\/i0.wp.com\/www.jitendrazaa.com\/blog\/wp-content\/uploads\/2014\/08\/SOQL-Builder-Using-Node.js-AngularJs-Salesforce-REST-API-on-Heroku-1024x504.png?resize=525%2C300&ssl=1 1.5x"},"classes":[]},{"id":3756,"url":"https:\/\/www.jitendrazaa.com\/blog\/webtech\/web\/dependency-injection-in-angularjs\/","url_meta":{"origin":3745,"position":2},"title":"Dependency Injection in AngularJs","author":"Jitendra Zaa","date":"February 22, 2014","format":false,"excerpt":"In this series, we have gone through many articles on AngularJs. This time I will discuss about Dependency Injection in AngularJs . Dependency injection is a software design pattern that allows the removal of hard-coded dependencies and makes it possible to change them, whether at run-time or compile-time. Before going\u2026","rel":"","context":"In "HTML"","block_context":{"text":"HTML","link":"https:\/\/www.jitendrazaa.com\/blog\/category\/webtech\/web\/"},"img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":3675,"url":"https:\/\/www.jitendrazaa.com\/blog\/webtech\/web\/getting-started-with-angularjs\/","url_meta":{"origin":3745,"position":3},"title":"Getting Started with AngularJs","author":"Jitendra","date":"February 15, 2014","format":false,"excerpt":"AngularJs is most accepted MVC framework in Javascript developed by Google. In my point of view, If its developed by Google then there must be something new and unique about this library. It can be used to provide MVC architect to your web application. It has great developers community, so\u2026","rel":"","context":"In "HTML"","block_context":{"text":"HTML","link":"https:\/\/www.jitendrazaa.com\/blog\/category\/webtech\/web\/"},"img":{"alt_text":"AngularJS by Google","src":"https:\/\/i0.wp.com\/jitendrazaa.com\/blog\/wp-content\/uploads\/2014\/02\/AngularJS-by-Google-300x84.png?resize=350%2C200&ssl=1","width":350,"height":200},"classes":[]},{"id":3917,"url":"https:\/\/www.jitendrazaa.com\/blog\/salesforce\/ajax-based-autocomplete-typeahead-directive-in-angularjs\/","url_meta":{"origin":3745,"position":4},"title":"Ajax based AutoComplete \/ TypeAhead Directive in AngularJS","author":"Jitendra","date":"July 15, 2014","format":false,"excerpt":"Previously we already discussed below Auto Complete components: Ajax Based Multiselect JQuery Autocomplete Control in ASP.Net AutoComplete Component in Visualforce using JQueryUI In this article, we will be creating TypeAhead Directive (Auto Complete) again in Salesforce However this time we will use AngularJs. Why we are using AngularJS ? We\u2026","rel":"","context":"In "Salesforce"","block_context":{"text":"Salesforce","link":"https:\/\/www.jitendrazaa.com\/blog\/category\/salesforce\/"},"img":{"alt_text":"TypeAhead Demo using AngularJs","src":"https:\/\/i0.wp.com\/www.jitendrazaa.com\/blog\/wp-content\/uploads\/2014\/07\/TypeAhead-Demo-using-AngularJs.png?resize=350%2C200&ssl=1","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/www.jitendrazaa.com\/blog\/wp-content\/uploads\/2014\/07\/TypeAhead-Demo-using-AngularJs.png?resize=350%2C200&ssl=1 1x, https:\/\/i0.wp.com\/www.jitendrazaa.com\/blog\/wp-content\/uploads\/2014\/07\/TypeAhead-Demo-using-AngularJs.png?resize=525%2C300&ssl=1 1.5x, https:\/\/i0.wp.com\/www.jitendrazaa.com\/blog\/wp-content\/uploads\/2014\/07\/TypeAhead-Demo-using-AngularJs.png?resize=700%2C400&ssl=1 2x"},"classes":[]},{"id":4047,"url":"https:\/\/www.jitendrazaa.com\/blog\/webtech\/how-to-use-postgresql-in-nodejs\/","url_meta":{"origin":3745,"position":5},"title":"How to use PostgreSQL in Nodejs","author":"Jitendra","date":"November 17, 2014","format":false,"excerpt":"I have written many articles on Node.js and AngularJs. In this article, I will demonstrate how to use PostgreSQL with Node.js and deploy on Heroku. I think you already smelled that this is one of starting article which will finally merged with Salesforce to create some cool application. Assuming you\u2026","rel":"","context":"In "Node.js"","block_context":{"text":"Node.js","link":"https:\/\/www.jitendrazaa.com\/blog\/category\/others\/node-js\/"},"img":{"alt_text":"PostgreSQL in Node.js","src":"https:\/\/i0.wp.com\/www.jitendrazaa.com\/blog\/wp-content\/uploads\/2014\/11\/PostgreSQL-in-Node.js.png?resize=350%2C200&ssl=1","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/www.jitendrazaa.com\/blog\/wp-content\/uploads\/2014\/11\/PostgreSQL-in-Node.js.png?resize=350%2C200&ssl=1 1x, https:\/\/i0.wp.com\/www.jitendrazaa.com\/blog\/wp-content\/uploads\/2014\/11\/PostgreSQL-in-Node.js.png?resize=525%2C300&ssl=1 1.5x"},"classes":[]}],"jetpack_likes_enabled":true,"_links":{"self":[{"href":"https:\/\/www.jitendrazaa.com\/blog\/wp-json\/wp\/v2\/posts\/3745","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.jitendrazaa.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.jitendrazaa.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.jitendrazaa.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.jitendrazaa.com\/blog\/wp-json\/wp\/v2\/comments?post=3745"}],"version-history":[{"count":0,"href":"https:\/\/www.jitendrazaa.com\/blog\/wp-json\/wp\/v2\/posts\/3745\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.jitendrazaa.com\/blog\/wp-json\/wp\/v2\/media?parent=3745"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.jitendrazaa.com\/blog\/wp-json\/wp\/v2\/categories?post=3745"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.jitendrazaa.com\/blog\/wp-json\/wp\/v2\/tags?post=3745"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}