{"id":7469,"date":"2019-10-29T05:33:30","date_gmt":"2019-10-29T05:33:30","guid":{"rendered":"https:\/\/www.devopsschool.com\/blog\/?p=7469"},"modified":"2020-07-18T05:04:14","modified_gmt":"2020-07-18T05:04:14","slug":"filtering-sorting-and-paging-in-angular-js","status":"publish","type":"post","link":"https:\/\/www.devopsschool.com\/blog\/filtering-sorting-and-paging-in-angular-js\/","title":{"rendered":"How to Filtering, Sorting, and Paging in Angular JS?"},"content":{"rendered":"\n<p>First, we\u2019ll discuss what is AnglularJS and their Benefits.<\/p>\n\n\n\n<p><strong>What is Angular JS<\/strong><\/p>\n\n\n\n<p class=\"has-text-align-left\">Angular JS is a Javascript Framework that helps build web applications. It is used in Single Page Application (SPA) projects. It extends HTML DOM with additional attributes and makes it more responsive to user actions. AngularJS is open source, completely free, and used by thousands of developers around the world. It is licensed under the Apache license version 2.0.<\/p>\n\n\n\n<p><strong>Benefits of AngularJS<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>Dependency Injection<\/li><li> Two-way Data-Binding<\/li><li> Testing<\/li><li> Model View Controller<\/li><li> Directives, filters etc\u2026<\/li><\/ul>\n\n\n\n<p>Now, Get started:  <strong>Step 1<\/strong><\/p>\n\n\n\n<p>As a first step, we will set up a new Angular JS application called &#8216;GridApp&#8217; with a basic controller called &#8216;GridController&#8217; which we will be using throughout this tutorial. I\u2019ve included the following files in the index.html.<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>Anglular.min.js<\/li><li> App.js (Our app initialization file)<\/li><li> Grid.js (This will be our controller file)<\/li><li> Bootstrap.min.css<\/li><li> Main.css (For any custom styles)<\/li><\/ul>\n\n\n\n<p>Here the folder structure:<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter\"><img loading=\"lazy\" decoding=\"async\" width=\"282\" height=\"187\" src=\"https:\/\/www.devopsschool.com\/blog\/wp-content\/uploads\/2019\/10\/folder.png\" alt=\"\" class=\"wp-image-7475\"\/><\/figure><\/div>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter\"><img loading=\"lazy\" decoding=\"async\" width=\"332\" height=\"156\" src=\"https:\/\/www.devopsschool.com\/blog\/wp-content\/uploads\/2019\/10\/folder1.png\" alt=\"\" class=\"wp-image-7476\" srcset=\"https:\/\/www.devopsschool.com\/blog\/wp-content\/uploads\/2019\/10\/folder1.png 332w, https:\/\/www.devopsschool.com\/blog\/wp-content\/uploads\/2019\/10\/folder1-300x141.png 300w\" sizes=\"auto, (max-width: 332px) 100vw, 332px\" \/><\/figure><\/div>\n\n\n\n<p>Our index.html should look similar to the code below.<\/p>\n\n\n\n<script src=\"https:\/\/gist.github.com\/narayanlog\/279a6cf721e87966163aa85f1abf53a6.js\"><\/script>\n\n\n\n<p>Our app.js file will only contain app initialization code:<\/p>\n\n\n\n<script src=\"https:\/\/gist.github.com\/narayanlog\/68694065b5d21cbcc3bf70581b4126a0.js\"><\/script>\n\n\n\n<p><strong>Step 2: Displaying data<\/strong><\/p>\n\n\n\n<p>Now that we have set up our application, let\u2019s move to add and display some data. we will be using random JSON data that I\u2019ll be adding to the &#8216;grid.js&#8217; file. Alternatively, you can also use an Ajax request (using $http) to fetch the data to display.<\/p>\n\n\n\n<script src=\"https:\/\/gist.github.com\/narayanlog\/b92bd41fe0e73851c3c3fe8cd02231d3.js\"><\/script>\n\n\n\n<p>Next, we will use the ng-repeat directive to display this data in a table format.<\/p>\n\n\n\n<script src=\"https:\/\/gist.github.com\/narayanlog\/7167921475a84f02a7cda9d26f6e15a5.js\"><\/script>\n\n\n\n<p><strong>Step 3: Filtering data<\/strong><\/p>\n\n\n\n<p>Filtering data in Angular JS is also easy. Angular JS comes with a number of amazing filters that you can use to transform data.<\/p>\n\n\n\n<p>Before we add any filtering code though, let\u2019s first add an input search field in our index.html file. Which we\u2019ll be binding to our controller data using the ng-model directive. And add your &#8220;grid&#8221; div the following code:<\/p>\n\n\n\n<script src=\"https:\/\/gist.github.com\/narayanlog\/5a04bc3b2d685a168505b84be94e64e1.js\"><\/script>\n\n\n\n<p>We used the ng-repeat directive to iterate through our data and display it. In this case, we will apply our filter to sort data.<\/p>\n\n\n\n<p>ng-repeat=&#8221;person in people | filter: queryText&#8221;<\/p>\n\n\n\n<p>What we have done this code, we have applied the data filter. Filter in AnglularJS can be applied by using the | (pipe) character followed by the filter name. <br> The filter used in this case, searches through our data and returns matched items. In AnglularJS data-binding is that whenever you type anything in the search field, the view will automatically be updated with the new results.<\/p>\n\n\n\n<p><strong>Step 4: Sorting data<\/strong><\/p>\n\n\n\n<p>Now, let&#8217;s data sorting in Angular JS. Angular JS also offers a pre-defined filter that can help you order and sort data easily.<\/p>\n\n\n\n<p>These filters take two arguments:<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li> Order key<\/li><li> Reverse sort (can be either true or false; true in case of descending order)<\/li><\/ul>\n\n\n\n<p>We can use this sorting filter in Angular JS. Before we apply this filter though, let\u2019s add some basic sort functionality in our controller &#8216;grid.js&#8217;.<\/p>\n\n\n\n<script src=\"https:\/\/gist.github.com\/narayanlog\/ebbcd2a54c195ac77f7f6fa4fb0188b4.js\"><\/script>\n\n\n\n<p>Now we have added default sorting configuration and function that takes a key as an argument. This function also toggles the sorting order. To apply the orderByfilter and update our table heading markup to call this function upon ng-click.<\/p>\n\n\n\n<script src=\"https:\/\/gist.github.com\/narayanlog\/2d50277f8e0564ad8af771dcc7336f79.js\"><\/script>\n\n\n\n<p>I have also added glyphicon to indicate the current sort order. You can see sorting results, just run the application in a browser.<\/p>\n\n\n\n<p><strong>Step 5: Paging<\/strong><\/p>\n\n\n\n<p>You need to add the dirPaginate library to our project. You can install it with Bower, or npm, or just download it manually from this link.<\/p>\n\n\n\n<p><strong>Bower: bower install angular-utils-pagination<\/strong><\/p>\n\n\n\n<p><strong>npm: npm install angular-utils-pagination<\/strong><\/p>\n\n\n\n<p>Next, include the link to the dirPagination.js file to your index.html file. To add the &#8216;angularUtils.directives.dirPagination&#8217; module in the controller file.<\/p>\n\n\n\n<script src=\"https:\/\/gist.github.com\/narayanlog\/e51c5d7dfa24ec378051608c615ace13.js\"><\/script>\n\n\n\n<p>You can also add a scope variable for the number of items you want to display per page.<\/p>\n\n\n\n<p>scope.itemsPerPage = 5;<\/p>\n\n\n\n<p>To use of dirPaginate, you have to replace your ng-repeat directive with the dir-paginate directive.<\/p>\n\n\n\n<p>To add here is a dirPaginate filter, which will restrict the items shown per page.<\/p>\n\n\n\n<script src=\"https:\/\/gist.github.com\/narayanlog\/9988d8260f58a1191eaa1a7a96f9685c.js\"><\/script>\n\n\n\n<p>The itemsPerPage should be applied after all other filters.<\/p>\n\n\n\n<p>And, then add the following code right after your grid.<\/p>\n\n\n\n<script src=\"https:\/\/gist.github.com\/narayanlog\/c9e0f2edeea4fe9f768cf541873eb185.js\"><\/script>\n\n\n\n<p>This will automatically display\/hide the pagination links based on your data.<\/p>\n\n\n\n<p>The final code of our index.html are:<\/p>\n\n\n\n<script src=\"https:\/\/gist.github.com\/narayanlog\/38b5c813a3c4810917f57d2558e4f76e.js\"><\/script>\n\n\n\n<p>And final code of grid.js<\/p>\n\n\n\n<script src=\"https:\/\/gist.github.com\/narayanlog\/9f8ca2c4a9af000673ea7b372288947f.js\"><\/script>\n\n\n\n<p>The final results, you can see look like:<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"359\" src=\"https:\/\/www.devopsschool.com\/blog\/wp-content\/uploads\/2019\/10\/filter-1024x359.png\" alt=\"\" class=\"wp-image-7479\" srcset=\"https:\/\/www.devopsschool.com\/blog\/wp-content\/uploads\/2019\/10\/filter-1024x359.png 1024w, https:\/\/www.devopsschool.com\/blog\/wp-content\/uploads\/2019\/10\/filter-300x105.png 300w, https:\/\/www.devopsschool.com\/blog\/wp-content\/uploads\/2019\/10\/filter-768x270.png 768w, https:\/\/www.devopsschool.com\/blog\/wp-content\/uploads\/2019\/10\/filter.png 1165w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n","protected":false},"excerpt":{"rendered":"<p>First, we\u2019ll discuss what is AnglularJS and their Benefits. What is Angular JS Angular JS is a Javascript Framework that helps build web applications. It is used in Single Page&#8230; <\/p>\n","protected":false},"author":9,"featured_media":7483,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_joinchat":[],"footnotes":""},"categories":[5487],"tags":[5488,5489,4459,5491,5490,5492],"class_list":["post-7469","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-angular-js","tag-angular-js","tag-filtering","tag-html","tag-javascript-framework","tag-paging","tag-single-page-application"],"_links":{"self":[{"href":"https:\/\/www.devopsschool.com\/blog\/wp-json\/wp\/v2\/posts\/7469","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.devopsschool.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.devopsschool.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.devopsschool.com\/blog\/wp-json\/wp\/v2\/users\/9"}],"replies":[{"embeddable":true,"href":"https:\/\/www.devopsschool.com\/blog\/wp-json\/wp\/v2\/comments?post=7469"}],"version-history":[{"count":4,"href":"https:\/\/www.devopsschool.com\/blog\/wp-json\/wp\/v2\/posts\/7469\/revisions"}],"predecessor-version":[{"id":16413,"href":"https:\/\/www.devopsschool.com\/blog\/wp-json\/wp\/v2\/posts\/7469\/revisions\/16413"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.devopsschool.com\/blog\/wp-json\/wp\/v2\/media\/7483"}],"wp:attachment":[{"href":"https:\/\/www.devopsschool.com\/blog\/wp-json\/wp\/v2\/media?parent=7469"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.devopsschool.com\/blog\/wp-json\/wp\/v2\/categories?post=7469"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.devopsschool.com\/blog\/wp-json\/wp\/v2\/tags?post=7469"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}