Angularjs search and sort on table data

Angularjs search & sort table data how to sort json table data in angularjs search records in table with angularjs power of angularjs search and sort easiest way to search and sort in angularjs angularjs search sort and custom paging

Sorting and searching on table data in angularjs is more than easy, just we need to do some html adjustment and everything works quickly. No need to write any separate procedure with these extra features, in this article we will see how we can achieve it without calling the data from database and without paging, latter on if we need we can extend it to do the same feature with data from database and add paging feature as well easily.

In our previos article Angularjs ui-routing with Web API we used table to show some information from a list of people, we will use the same to extend the sort and filter feature on that, so let's start it.

First of all we will change our controller to add some variables on scope, see this:

angular.module("MyApp")
   .controller("aboutCtrl", ['$scope', function ($scope) {

       $scope.pageTitle = 'Search & Sort Table Records';
       $scope.sortBy = 'name'; // default value
       $scope.sortDescending = false; // default ascending
       $scope.searchText = ''; // default blank

       $scope.peoples = [
           { 'name': 'Ali Adravi', 'gendar': 'Male', 'age': 33, 'salary': 123400 },
           { 'name': 'Ajay Devgon', 'gendar': 'Male', 'age': 45, 'salary': 400000 },
           { 'name': 'Aishwarya Roe', 'gendar': 'Female', 'age': 30, 'salary': 900000 },
           { 'name': 'Salman khan', 'gendar': 'Male', 'age': 44, 'salary': 1200000 },
           { 'name': 'John Smith', 'gendar': 'Male', 'age': 18, 'salary': 34000 },
           { 'name': 'Angelina Jolie', 'gendar': 'Femal', 'age': 33, 'salary': 9900000 },
       ];

   }]);

We added here some scope variables

  • pageTitle: to show the page title
  • sortBy: column name on which we need to sort
  • sortDescending: order of sorting default descending false
  • searchText: text to search
  • peoples: list of people to show in table, hard coded for now.

Let's add a section on top of the page to show what are the setting we are playing like sort by, sort direction and search text, whenever we will change any of the information it will automatically changed in this area, just add following simple html decorated with bootstrap CSS and angularjs bindings

<div class="alert alert-info">
    <div>Sort By: {{sortBy}}</div>
    <div>Descending: {{sortDescending}}</div>
    <div>Search Text: {{searchText}}</div>
</div>

Nothing new, we need a textbox to search the data, so add this html just bellow the above information section

<div class="input-group">
    <input type="text" 
           ng-model="searchText"
           class="form-control" 
           placeholder="Enter search text" >
    <span class="input-group-addon" id="basic-addon1">
        <i class="glyphicon glyphicon-search"></i>
    </span>
</div>

Let's complete the search feature by adding just one filter option on our ng-repeat, change that line to

<tr ng-repeat="person in peoples | filter: searchText ">

Now run the application and try to type something in the search text box, type any value, name, age, gender or salary, it will work for every column, is not it simple and fast. So searching is complete, now we will add the sorting feature with direction arrow in every column as well.

Till now our header column names were simply TH and header string, let's change it to make sortable

<th>
    <a ng-click="sortBy = 'name'; sortDescending = !sortDescending">
        Name
    </a>
</th>

on ng-click we are setting the column to sortBy scope variable and and sort direction by setting sortDescending, still we have not added the direction icon to the column so let add that as well before jumping to test it. Now our Name header column will become

<th>
    <a ng-click="sortBy = 'name'; sortDescending = !sortDescending">
        Name
    </a>
    <span ng-show="sortBy == 'name' && !sortDescending" class="glyphicon glyphicon-chevron-down"></span>
    <span ng-show="sortBy == 'name' && sortDescending" class="glyphicon glyphicon-chevron-up"></span>
</th>

We need to add the order by to our ng-repeat, so it will become now

<tr ng-repeat="person in peoples | filter: searchText | orderBy:sortBy:sortDescending">
    <td ng-bind="person.name"></td>
    <td ng-bind="person.gendar"></td>
    <td ng-bind="person.age"></td>
    <td ng-bind="person.salary | currency"></td>
</tr>

Run the application and click on the header of name column in table and you will notice it is sorting properly as well as it is adding the direction arrow and also updating the value in our information bar at the top.

So do the same for rest fo the coumns on which you want to give the sorting feature, I am going to add on every column so my complete about us page html is here:

<h1 ng-bind="pageTitle"></h1>

<div class="alert alert-info">
    <div>Sort By: {{sortBy}}</div>
    <div>Descending: {{sortDescending}}</div>
    <div>Search Text: {{searchText}}</div>
</div>

<div class="input-group">
    <input type="text" 
           ng-model="searchText"
           class="form-control" 
           placeholder="Enter search text" >
    <span class="input-group-addon" id="basic-addon1">
        <i class="glyphicon glyphicon-search"></i>
    </span>
</div>

<table class="table table-hover ">
    <tr class="alert-success">
        <th>
            <a ng-click="sortBy = 'name'; sortDescending = !sortDescending">
                Name
            </a>
            <span ng-show="sortBy == 'name' && !sortDescending" class="glyphicon glyphicon-chevron-down"></span>
            <span ng-show="sortBy == 'name' && sortDescending" class="glyphicon glyphicon-chevron-up"></span>
        </th>
        <th>
            <a ng-click="sortBy = 'gendar'; sortDescending = !sortDescending">
                Gendar
            </a>
            <span ng-show="sortBy == 'gendar' && !sortDescending" class="glyphicon glyphicon-chevron-down"></span>
            <span ng-show="sortBy == 'gendar' && sortDescending" class="glyphicon glyphicon-chevron-up"></span>
        </th>
        <th>
            <a ng-click="sortBy = 'age'; sortDescending = !sortDescending">
                Age
            </a>
            <span ng-show="sortBy == 'age' && !sortDescending" class="glyphicon glyphicon-chevron-down"></span>
            <span ng-show="sortBy == 'age' && sortDescending" class="glyphicon glyphicon-chevron-up"></span>
        </th>
        <th>
            <a ng-click="sortBy = 'salary'; sortDescending = !sortDescending">
                Salary
            </a>
            <span ng-show="sortBy == 'salary' && !sortDescending" class="glyphicon glyphicon-chevron-down"></span>
            <span ng-show="sortBy == 'salary' && sortDescending" class="glyphicon glyphicon-chevron-up"></span>
        </th>
    </tr>
    <tr ng-repeat="person in peoples | filter: searchText | orderBy:sortBy:sortDescending ">
        <td ng-bind="person.name"></td>
        <td ng-bind="person.gendar"></td>
        <td ng-bind="person.age"></td>
        <td ng-bind="person.salary | currency"></td>
    </tr>
</table>

Output of our hard work is here:

alt text

If you have any question, you are most welcome, I will try to reply as soon as possible. If you have any suggestion or better option please provide which can help to any of us.

Ali Adravi Having 13+ years of experience in Microsoft Technologies (C#, ASP.Net, MVC and SQL Server). Worked with Metaoption LLC, for more than 9 years and still with the same company. Always ready to learn new technologies and tricks.
  • angularjs
  • table
  • search
  • sort
By Ali Adravi On 18 Jul, 15  Viewed: 3,222

Other blogs you may like

Angularjs powerful paging on table and searching with delay and demo

Paging on table is the basic requirement and most of us look for some grid so it can provide the complete feature of paging and sorting but in Angularjs it is so easy that anyone can achieve it by writing some code. I checked and found most of the available code give the paging feature in for 1 to... By Ali Adravi   On 14 Aug 2015  Viewed: 13,009

Angularjs Cascading Dropdown/Select with demo

Cascading dropdown with angularjs is easier than MVC and ASP.Net. In Angularjs ng-change is the best event to hook the function to get the second dropdown list items. In this article, we will try to fill the state dropdown on selection change of country and then fill the city dropdown on change... By Ali Adravi   On 06 Aug 2015  Viewed: 47,147

Angularjs CRUD with Web API, Entity Framework & Bootstrap modal popup part 2

Add/Edid Customer in Modal Popup --- In previous article we discussed how to search, delete and show detail of customer and contact list. In this article we will try to open the modal popup to add new customer and edit an existing customer record. I divided article in two parts because of the... By Ali Adravi   On 29 Jul 2015  Viewed: 17,123

Custom Directives in AngularJS with example and demo

Angularjs custom directives are the common to avoid the duplicate code, it is easy powerful and really nice. There are already too many directive have been created by experts but as a developer we need to write our own to achieve our specific goal. ng-model, ng-if, ng-show, ng-repeat all these are... By Ali Adravi   On 29 Jul 2015  Viewed: 3,754

Angularjs CRUD with Web API, Entity Framework & Bootstrap modal popup part 1

Search sort Insert update and delete are the basic features we need to learn first to learn any language, In this article we will try to create these features with Web API, bootstrap modal popup and ui.router. We will use enetity framework code first to save and retrieve data from database. We... By Ali Adravi   On 28 Jul 2015  Viewed: 28,515