{"id":3751,"date":"2014-02-22T08:59:20","date_gmt":"2014-02-22T03:29:20","guid":{"rendered":"http:\/\/JitendraZaa.com\/blog\/?p=3751"},"modified":"2014-07-05T19:18:17","modified_gmt":"2014-07-05T19:18:17","slug":"pagination-and-sorting-of-data-table-using-angularjs","status":"publish","type":"post","link":"https:\/\/www.jitendrazaa.com\/blog\/webtech\/web\/pagination-and-sorting-of-data-table-using-angularjs\/","title":{"rendered":"Pagination, Searching and Sorting of Data Table  using AngularJS"},"content":{"rendered":"<p style=\"text-align: justify;\">We have already discussed &#8220;<a title=\"Basics of AngularJs\" href=\"https:\/\/jitendrazaa.com\/blog\/webtech\/web\/getting-started-with-angularjs\/\">Basics of AngularJS<\/a>&#8221; and &#8220;<a title=\"Simple Searching and Sorting using AngularJs\" href=\"https:\/\/jitendrazaa.com\/blog\/webtech\/web\/table-with-sorting-and-searching-using-angularjs\/\">Simple Searching and Sorting<\/a>&#8220;. In this article, we will add Pagination feature also to our <a title=\"Searching and Sorting in AngularJs\" href=\"https:\/\/jitendrazaa.com\/blog\/webtech\/web\/table-with-sorting-and-searching-using-angularjs\/\">previous example<\/a>. What makes difficult is Sorting result when values are returned from Search and pagination is enabled. Unlike previous post we cannot use standard &#8220;<a title=\"OrderBy AngularJs\" href=\"http:\/\/docs.angularjs.org\/api\/ng\/filter\/orderBy\">OrderBy<\/a>&#8221; filter provided by AngularJs framework, this time we have to create Javascript function inside Controller for Sorting purpose.<\/p>\n<p>Prerequisite Libraries :<\/p>\n<ol>\n<li><a title=\"UnderscoreJs Library\" href=\"http:\/\/underscorejs.org\/underscore.js\">UnderscoreJs<\/a><\/li>\n<li><a title=\"Bootstrap library\" href=\"http:\/\/netdna.bootstrapcdn.com\/bootstrap\/3.1.0\/css\/bootstrap.min.css\">Bootstrap CSS<\/a><\/li>\n<li><a title=\"AngularJs library\" href=\"http:\/\/ajax.googleapis.com\/ajax\/libs\/angularjs\/1.2.12\/angular.min.js\">AngularJs<\/a><\/li>\n<\/ol>\n<p style=\"text-align: justify;\">This post used &#8220;Custom Service&#8221;, so please read <a title=\"Dependency Injection in AngularJs\" href=\"https:\/\/jitendrazaa.com\/blog\/webtech\/web\/dependency-injection-in-angularjs\/\">this article<\/a> to understand Dependency Injection in AngularJs.<\/p>\n<figure id=\"attachment_3753\" aria-describedby=\"caption-attachment-3753\" style=\"width: 300px\" class=\"wp-caption aligncenter\"><a href=\"https:\/\/i0.wp.com\/jitendrazaa.com\/blog\/wp-content\/uploads\/2014\/02\/Searching-Sorting-and-Pagination-in-Table-using-AngularJS.png?ssl=1\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" class=\"size-medium wp-image-3753\" src=\"https:\/\/i0.wp.com\/jitendrazaa.com\/blog\/wp-content\/uploads\/2014\/02\/Searching-Sorting-and-Pagination-in-Table-using-AngularJS-300x156.png?resize=300%2C156&#038;ssl=1\" alt=\"Searching Sorting and Pagination in Table using AngularJS\" width=\"300\" height=\"156\" \/><\/a><figcaption id=\"caption-attachment-3753\" class=\"wp-caption-text\">Searching Sorting and Pagination in Table using AngularJS<\/figcaption><\/figure>\n<p><!--more--><\/p>\n<p><strong>Live Demo :<\/strong><\/p>\n<p><iframe loading=\"lazy\" src=\"http:\/\/jsfiddle.net\/ilovenagpur\/wPnxy\/embedded\/result\/\" width=\"96%\" height=\"450\" frameborder=\"0\" scrolling=\"no\"><\/iframe><\/p>\n<p><strong>Complete HTML Code :<\/strong><\/p>\n<pre class=\"brush: xml; title: ; notranslate\" title=\"\">\r\n&lt;br \/&gt;\r\n&lt;br \/&gt;\r\n&lt;div ng-app=&quot;myApp&quot;&gt;\r\n    &lt;div ng-controller=&quot;TableCtrl&quot;&gt;\r\n        &lt;div class=&quot;input-group&quot;&gt;\r\n            &lt;input class=&quot;form-control&quot; ng-model=&quot;searchText&quot; placeholder=&quot;Search&quot; type=&quot;search&quot; ng-change=&quot;search()&quot; \/&gt; &lt;span class=&quot;input-group-addon&quot;&gt;\r\n      &lt;span class=&quot;glyphicon glyphicon-search&quot;&gt;&lt;\/span&gt;\r\n&lt;\/span&gt;\r\n        &lt;\/div&gt;\r\n        &lt;table class=&quot;table  table-hover data-table myTable&quot;&gt;\r\n            &lt;thead&gt;\r\n                &lt;tr&gt;\r\n                    &lt;th class=&quot;EmpId&quot;&gt; &lt;a href=&quot;#&quot; ng-click=&quot;sort('EmpId',$event)&quot;&gt;EmpId\r\n                         &lt;span class=&quot;{{Header&#x5B;0]}}&quot;&gt;&lt;\/span&gt;\r\n                         &lt;\/a&gt;\r\n\r\n                    &lt;\/th&gt;\r\n                    &lt;th class=&quot;name&quot;&gt; &lt;a ng-click=&quot;sort('name')&quot; href=&quot;#&quot;&gt; Name\r\n                         &lt;span class=&quot;{{Header&#x5B;1]}}&quot;&gt;&lt;\/span&gt;&lt;\/a&gt;\r\n                    &lt;\/th&gt;\r\n                    &lt;th class=&quot;Email&quot;&gt; &lt;a ng-click=&quot;sort('Email')&quot; href=&quot;#&quot;&gt; Email\r\n                     &lt;span class=&quot;{{Header&#x5B;2]}}&quot;&gt;&lt;\/span&gt;&lt;\/a&gt;\r\n                    &lt;\/th&gt;\r\n                &lt;\/tr&gt;\r\n            &lt;\/thead&gt;\r\n            &lt;tbody&gt;\r\n                &lt;tr ng-repeat=&quot;item in ItemsByPage&#x5B;currentPage] | orderBy:columnToOrder:reverse&quot;&gt;\r\n                    &lt;td&gt;{{item.EmpId}}&lt;\/td&gt;\r\n                    &lt;td&gt;{{item.name}}&lt;\/td&gt;\r\n                    &lt;td&gt;{{item.Email}}&lt;\/td&gt;\r\n                &lt;\/tr&gt;\r\n            &lt;\/tbody&gt;\r\n        &lt;\/table&gt;\r\n        &lt;ul class=&quot;pagination pagination-sm&quot;&gt;\r\n            &lt;li ng-class=&quot;{active:0}&quot;&gt;&lt;a href=&quot;#&quot; ng-click=&quot;firstPage()&quot;&gt;First&lt;\/a&gt;\r\n\r\n            &lt;\/li&gt;\r\n            &lt;li ng-repeat=&quot;n in range(ItemsByPage.length)&quot;&gt; &lt;a href=&quot;#&quot; ng-click=&quot;setPage()&quot; ng-bind=&quot;n+1&quot;&gt;1&lt;\/a&gt;\r\n\r\n            &lt;\/li&gt;\r\n            &lt;li&gt;&lt;a href=&quot;#&quot; ng-click=&quot;lastPage()&quot;&gt;Last&lt;\/a&gt;\r\n\r\n            &lt;\/li&gt;\r\n        &lt;\/ul&gt;\r\n        &lt;div class=&quot;row&quot;&gt;\r\n            &lt;div class=&quot;col-xs-3&quot;&gt;\r\n                &lt;input type=&quot;text&quot; ng-model=&quot;newEmpId&quot; class=&quot;form-control&quot; placeholder=&quot;EmpId&quot;&gt;\r\n            &lt;\/div&gt;\r\n            &lt;div class=&quot;col-xs-3&quot;&gt;\r\n                &lt;input type=&quot;text&quot; ng-model=&quot;newName&quot; class=&quot;form-control&quot; placeholder=&quot;Name&quot;&gt;\r\n            &lt;\/div&gt;\r\n            &lt;div class=&quot;col-xs-4&quot;&gt;\r\n                &lt;input type=&quot;email&quot; ng-model=&quot;newEmail&quot; class=&quot;form-control&quot; placeholder=&quot;Email&quot;&gt;\r\n            &lt;\/div&gt;\r\n            &lt;div class=&quot;col-xs-1&quot;&gt;\r\n                &lt;button ng-click=&quot;add()&quot; type=&quot;button&quot; class=&quot;btn btn-primary&quot;&gt; &lt;span class=&quot;glyphicon glyphicon-plus&quot;&gt;&lt;\/span&gt;\r\n\r\n                &lt;\/button&gt;\r\n            &lt;\/div&gt;\r\n        &lt;\/div&gt;\r\n    &lt;\/div&gt;\r\n    &lt;!-- Ends Controller --&gt;\r\n&lt;\/div&gt;\r\n<\/pre>\n<p><strong>Complete JavaScript Code :<\/strong><\/p>\n<pre class=\"brush: jscript; title: ; notranslate\" title=\"\">\r\n\/\/Demo of Searching Sorting and Pagination of Table with AngularJS - Advance Example\r\n\r\nvar myApp = angular.module('myApp', &#x5B;]);\r\n\r\n\/\/Not Necessary to Create Service, Same can be done in COntroller also as method like add() method\r\nmyApp.service('filteredListService', function () {\r\n\r\n    this.searched = function (valLists, toSearch) {\r\n        return _.filter(valLists,\r\n\r\n        function (i) {\r\n            \/* Search Text in all 3 fields *\/\r\n            return searchUtil(i, toSearch);\r\n        });\r\n    };\r\n\r\n    this.paged = function (valLists, pageSize) {\r\n        retVal = &#x5B;];\r\n        for (var i = 0; i &lt; valLists.length; i++) {\r\n            if (i % pageSize === 0) {\r\n                retVal&#x5B;Math.floor(i \/ pageSize)] = &#x5B;valLists&#x5B;i]];\r\n            } else {\r\n                retVal&#x5B;Math.floor(i \/ pageSize)].push(valLists&#x5B;i]);\r\n            }\r\n        }\r\n        return retVal;\r\n    };\r\n\r\n});\r\n\r\n\/\/Inject Custom Service Created by us and Global service $filter. This is one way of specifying dependency Injection\r\nvar TableCtrl = myApp.controller('TableCtrl', function ($scope, $filter, filteredListService) {\r\n\r\n    $scope.pageSize = 4;\r\n    $scope.allItems = getDummyData();\r\n    $scope.reverse = false;\r\n\r\n    $scope.resetAll = function () {\r\n        $scope.filteredList = $scope.allItems;\r\n        $scope.newEmpId = '';\r\n        $scope.newName = '';\r\n        $scope.newEmail = '';\r\n        $scope.searchText = '';\r\n        $scope.currentPage = 0;\r\n        $scope.Header = &#x5B;'', '', ''];\r\n    }\r\n\r\n    $scope.add = function () {\r\n        $scope.allItems.push({\r\n            EmpId: $scope.newEmpId,\r\n            name: $scope.newName,\r\n            Email: $scope.newEmail\r\n        });\r\n        $scope.resetAll();\r\n    }\r\n\r\n    $scope.search = function () {\r\n        $scope.filteredList = filteredListService.searched($scope.allItems, $scope.searchText);\r\n\r\n        if ($scope.searchText == '') {\r\n            $scope.filteredList = $scope.allItems;\r\n        }\r\n        $scope.pagination();\r\n    }\r\n\r\n    \/\/ Calculate Total Number of Pages based on Search Result\r\n    $scope.pagination = function () {\r\n        $scope.ItemsByPage = filteredListService.paged($scope.filteredList, $scope.pageSize);\r\n    };\r\n\r\n    $scope.setPage = function () {\r\n        $scope.currentPage = this.n;\r\n    };\r\n\r\n    $scope.firstPage = function () {\r\n        $scope.currentPage = 0;\r\n    };\r\n\r\n    $scope.lastPage = function () {\r\n        $scope.currentPage = $scope.ItemsByPage.length - 1;\r\n    };\r\n\r\n    $scope.range = function (input, total) {\r\n        var ret = &#x5B;];\r\n        if (!total) {\r\n            total = input;\r\n            input = 0;\r\n        }\r\n        for (var i = input; i &lt; total; i++) {\r\n            if (i != 0 &amp;&amp; i != total - 1) {\r\n                ret.push(i);\r\n            }\r\n        }\r\n        return ret;\r\n    };\r\n\r\n    $scope.sort = function (sortBy) {\r\n        $scope.resetAll();\r\n\r\n        $scope.columnToOrder = sortBy;\r\n\r\n        \/\/$Filter - Standard Service\r\n        $scope.filteredList = $filter('orderBy')($scope.filteredList, $scope.columnToOrder, $scope.reverse);\r\n\r\n        if ($scope.reverse) iconName = 'glyphicon glyphicon-chevron-up';\r\n        else iconName = 'glyphicon glyphicon-chevron-down';\r\n\r\n        if (sortBy === 'EmpId') {\r\n            $scope.Header&#x5B;0] = iconName;\r\n        } else if (sortBy === 'name') {\r\n            $scope.Header&#x5B;1] = iconName;\r\n        } else {\r\n            $scope.Header&#x5B;2] = iconName;\r\n        }\r\n\r\n        $scope.reverse = !$scope.reverse;\r\n\r\n        $scope.pagination();\r\n    };\r\n\r\n    \/\/By Default sort ny Name\r\n    $scope.sort('name');\r\n\r\n});\r\n\r\nfunction searchUtil(item, toSearch) {\r\n    \/* Search Text in all 3 fields *\/\r\n    return (item.name.toLowerCase().indexOf(toSearch.toLowerCase()) &gt; -1 || item.Email.toLowerCase().indexOf(toSearch.toLowerCase()) &gt; -1 || item.EmpId == toSearch) ? true : false;\r\n}\r\n\r\n\/*Get Dummy Data for Example*\/\r\nfunction getDummyData() {\r\n    return &#x5B;{\r\n        EmpId: 2,\r\n        name: 'Jitendra',\r\n        Email: 'jz@gmail.com'\r\n    }, {\r\n        EmpId: 1,\r\n        name: 'Minal',\r\n        Email: 'amz@gmail.com'\r\n    }, {\r\n        EmpId: 3,\r\n        name: 'Rudra',\r\n        Email: 'ruz@gmail.com'\r\n    }, {\r\n        EmpId: 21,\r\n        name: 'Jitendra1',\r\n        Email: 'jz@gmail.com'\r\n    }, {\r\n        EmpId: 11,\r\n        name: 'Minal1',\r\n        Email: 'amz@gmail.com'\r\n    }, {\r\n        EmpId: 31,\r\n        name: 'Rudra1',\r\n        Email: 'ruz@gmail.com'\r\n    }, {\r\n        EmpId: 22,\r\n        name: 'Jitendra2',\r\n        Email: 'jz@gmail.com'\r\n    }, {\r\n        EmpId: 12,\r\n        name: 'Minal2',\r\n        Email: 'amz@gmail.com'\r\n    }, {\r\n        EmpId: 32,\r\n        name: 'Rudra2',\r\n        Email: 'ruz@gmail.com'\r\n    }, {\r\n        EmpId: 23,\r\n        name: 'Jitendra3',\r\n        Email: 'jz@gmail.com'\r\n    }, {\r\n        EmpId: 13,\r\n        name: 'Minal3',\r\n        Email: 'amz@gmail.com'\r\n    }, {\r\n        EmpId: 33,\r\n        name: 'Rudra3',\r\n        Email: 'ruz@gmail.com'\r\n    }];\r\n}\r\n<\/pre>\n<p style=\"text-align: justify;\">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\u00a0<em>Salesforce<\/em>, You simply have to change &#8220;<em>getDummyData()<\/em>&#8220;\u009d method and get response using REST API.\u00a0<a title=\"Get JSON Output in Visualforce Page\" href=\"https:\/\/jitendrazaa.com\/blog\/salesforce\/json-output-in-visualforce\/\">This article will be helpful if you are looking on how to generate JSON output in Visualforce page<\/a>.<\/p>\n<p style=\"text-align: justify;\"><a title=\"Dependency Injection in AngularJs\" href=\"https:\/\/www.jitendrazaa.com\/blog\/webtech\/web\/dependency-injection-in-angularjs\/\"><strong>Why do we need Service in above example ?<\/strong><\/a><\/p>\n<p style=\"text-align: justify;\">It is always better to separate concern from Controller. So instead of writing methods or logics inside Controller, we have created Service and passed service as a parameter while declaring controller.<\/p>\n<p style=\"text-align: justify;\">Now we just have to call methods declared in service from Controller.<\/p>\n<p style=\"text-align: justify;\">If you are looking for same kind of Example in <a title=\"Salesforce\" href=\"https:\/\/jitendrazaa.com\/blog\/tag\/salesforce\/\">Salesforce <\/a>then this is <a title=\"Getting started with Angular.Js with Salesforce Visualforce Pages\" href=\"http:\/\/www.oyecode.com\/2013\/06\/getting-started-with-angularjs-on.html\">very Good Article<\/a> written by <a title=\"Harshit Pandey\" href=\"https:\/\/plus.google.com\/+HarshitPandey\/posts\">Harshit <\/a>and <a title=\"Mohit Srivastav\" href=\"https:\/\/plus.google.com\/+mohitsrivastav\/posts\">Mohit Srivastav<\/a>.<\/p>\n<p><strong><a title=\"Live Demo of Pagination, Sorting and Searching of Datatable in AngularJs\" href=\"http:\/\/jsfiddle.net\/ilovenagpur\/wPnxy\/\">Live Demo of this example<\/a><\/strong><\/p>\n","protected":false},"excerpt":{"rendered":"<p>We have already discussed &#8220;Basics of AngularJS&#8221; and &#8220;Simple Searching and Sorting&#8220;. 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 &#8220;OrderBy&#8221; filter provided by AngularJs framework, this [&hellip;]<\/p>\n","protected":false},"author":2,"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_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":"","jetpack_post_was_ever_published":false},"categories":[26],"tags":[35,49,136,331,206,208],"class_list":["post-3751","post","type-post","status-publish","format-standard","hentry","category-web","tag-angularjs","tag-bootstrap","tag-json","tag-salesforce","tag-underscore","tag-underscorejs"],"jetpack_featured_media_url":"","jetpack_sharing_enabled":true,"jetpack-related-posts":[{"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":3751,"position":0},"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 &quot;HTML&quot;","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":3745,"url":"https:\/\/www.jitendrazaa.com\/blog\/webtech\/web\/table-with-sorting-and-searching-using-angularjs\/","url_meta":{"origin":3751,"position":1},"title":"Table with Sorting and Searching using AngularJS","author":"Jitendra","date":"February 22, 2014","format":false,"excerpt":"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 Complete Html Code : [html] <div ng-app=\"myApp\">\u2026","rel":"","context":"In &quot;HTML&quot;","block_context":{"text":"HTML","link":"https:\/\/www.jitendrazaa.com\/blog\/category\/webtech\/web\/"},"img":{"alt_text":"Searching and Sorting in Table using AngularJS","src":"https:\/\/i0.wp.com\/jitendrazaa.com\/blog\/wp-content\/uploads\/2014\/02\/Searching-and-Sorting-in-Table-using-AngularJS-300x128.png?resize=350%2C200&ssl=1","width":350,"height":200},"classes":[]},{"id":3756,"url":"https:\/\/www.jitendrazaa.com\/blog\/webtech\/web\/dependency-injection-in-angularjs\/","url_meta":{"origin":3751,"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 &quot;HTML&quot;","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":3751,"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 &quot;HTML&quot;","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":3751,"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 &quot;Salesforce&quot;","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":3751,"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 &quot;Node.js&quot;","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\/3751","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\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/www.jitendrazaa.com\/blog\/wp-json\/wp\/v2\/comments?post=3751"}],"version-history":[{"count":12,"href":"https:\/\/www.jitendrazaa.com\/blog\/wp-json\/wp\/v2\/posts\/3751\/revisions"}],"predecessor-version":[{"id":3915,"href":"https:\/\/www.jitendrazaa.com\/blog\/wp-json\/wp\/v2\/posts\/3751\/revisions\/3915"}],"wp:attachment":[{"href":"https:\/\/www.jitendrazaa.com\/blog\/wp-json\/wp\/v2\/media?parent=3751"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.jitendrazaa.com\/blog\/wp-json\/wp\/v2\/categories?post=3751"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.jitendrazaa.com\/blog\/wp-json\/wp\/v2\/tags?post=3751"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}