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
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:
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.
|
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.
|
| By Ali Adravi On 18 Jul, 15 Viewed: 4,781 |
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: 20,895
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: 57,700
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: 19,575
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: 4,488
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: 31,336