Sorting the table data using angular js

Question

I am trying to sort the table data based on the column "Submitted Date" . I have written some code but it doesn't seem to be working. As I am new to Angular JS I need some guidance here. Please help.

code:

Angular js:

 vm.sotData = function (column) {
        vm.reverseSort = (vm.sortColumn == column) ? !vm.reverseSort : false;
        vm.sortColumn = column;
    }

Html Code:

<th style="width:13%" ng-click="">Total Amt<span ng-class=""></span></th>
<th style="width:7%" ng-click="">Status<span ng-class=""></span></th>
<th style="width:7%" ng-click="vm.sotData('SubmittedDate')">Submitted Date
       <span ng-class="vm.getSortClass('SubmittedDate')"></span>
</th>

What is data type of your 'SubmittedDate'? When you say sorting, Is that means most recent should be in top.. Right? — Vikas Gupta
– Vikas Gupta, Commented Sep 27, 2017 at 4:20
@Vikash.777 Its of type Datetime. and yeah its suppose to sort by latest 1st — shrey Pav
– shrey Pav, Commented Sep 27, 2017 at 5:53

Navoneel Talukdar · Accepted Answer · 2017-09-27 04:02:16Z

The main key of writing sorting functionality is to use

{{ orderBy_expression | orderBy : expression : reverse  }}

This returns a sorted Array based on the item. You can change the sorting order by specifying the reverse parameter.

Let's take the example of below array

$scope.friends = [
  {sno:1,name:'Yogesh Singh',age:23,gender:'Male'},
  {sno:2,name:'Sonarika Bhadoria',age:23,gender:'Female'},
  {sno:3,name:'Vishal Sahu',age:24,gender:'Male'},
  {sno:4,name:'Sanjay Singh',age:22,gender:'Male'}
];

// column to sort
$scope.column = 'sno';

// sort ordering (Ascending or Descending). Set true for descending
$scope.reverse = false; 

// called on header click
$scope.sortColumn = function(col){
  $scope.column = col;
  if($scope.reverse){
   $scope.reverse = false;
   $scope.reverseclass = 'arrow-up';
  }else{
   $scope.reverse = true;
   $scope.reverseclass = 'arrow-down';
  }
}; 

 // remove and change class
$scope.sortClass = function(col){
  if($scope.column == col ){
   if($scope.reverse){
    return 'arrow-down'; 
   }else{
    return 'arrow-up';
   }
  }else{
   return '';
  }
 };

In html reverse is used for detecting ascending or descending ordering. The default value set to false for ascending.

<table border='1'>
   <tr >
    <th ng-click='sortColumn("sno")' ng-class='sortClass("sno")'>S.no</th>
    <th ng-click='sortColumn("name")' ng-class='sortClass("name")'>Name</th>
    <th ng-click='sortColumn("age")' ng-class='sortClass("age")'>Age</th>
    <th ng-click='sortColumn("gender")' ng-class='sortClass("gender")'>Gender</th>
   </tr>
   <tr ng-repeat='friend in friends|orderBy:column:reverse'>
    <td width='20%' align='center'>{{friend.sno}}</td>
    <td width='35%' align='center'>{{friend.name}}</td>
    <td width='20%' align='center'>{{friend.age}}</td>
    <td width='25%' align='center'>{{friend.gender}}</td>
   </tr>
  </table>

thanks for such a good explaination. I have a question here. The values of the table are coming through ajax call (javascript) . I am entering values there itself. Will ng-repeat effect that?
No that won't be a problem,the binding list can be any from datasource.
Life saver. DataTable.js could not work well with sort/paging. Had to write this as a service and inject to my controllers

Vikas Gupta · Accepted Answer · 2017-09-27 04:40:18Z

<th style="width:13%" ng-click="">Total Amt<span ng-class=""></span></th>
    <th style="width:7%" ng-click="">Status<span ng-class=""></span></th>
    <th style="width:7%" ng-click="vm.sotData('SubmittedDate')">Submitted Date
            <span class="fa" ng-class="{'fa-caret-down':sortType.type=='SubmittedDate' && sortType.order==-1 ,
            'fa-caret-up':sortType.type=='SubmittedDate' && sortType.order==1}"> </span></th>

    /*for sorting Column*/
        $scope.vm.sotData= function (type) {
              $scope.sortType.order = $scope.sortType.order === 1 ? -1 : 1;
                if ($scope.sortType.order == '1') {
                    $scope.sortBy = type;
                }
                else {
                    $scope.sortBy = '-' + type;
                }
        };

@Vikas.777 I tried your solution. Its throwing an error "$scope is not defined"
Inject $scope as dependency in your controller, then $scope will work

Vivek Atri · Accepted Answer · 2017-09-27 06:16:24Z

0

Try this quick fix.

Code for sorting with Name in Friends

In your HTML,

1st change in table header for which sorting is to be done:-

<th style="width:7%" ng-click="orderByField='name'; reverseSort = !reverseSort"">Friend Name<span ng-class=""></span></th>

2nd change in table row

<tr ng-repeat="friend in Friends | orderBy:orderByField:reverseSort">....</tr>

answered Sep 27, 2017 at 6:16

Vivek Atri

562 bronze badges

Collectives™ on Stack Overflow

Sorting the table data using angular js

3 Answers 3

3 Comments

2 Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

2 Comments

Comments

Related