generic function to sort all columns of a table using javascript

Question

I have the following array of objects in my controller

$scope.records = [
    {
      "fName" : "Alfreds",
      "lName" : "Berglunds",
      "country" : "Germany",
      "age":21
    },
    {   
      "fName" : "Berglunds",
      "lName" : "Alfreds",
      "country" : "Sweden",
      "age":22
    },
    {      
      "fName" : "Centro",
      "lName" : "Ernst",
      "country" : "Mexico",
      "age":23
    },
    {      
      "fName" : "Ernst",
      "lName" : "Centro",
      "country" : "Austria",
      "age":24
    }
  ]

And I am populating a table in my view using the above array

<table ng-controller="myCtrl" border="1">
  <th ng-click="sortByFirstName()">First Nmae</th>
  <th ng-click="sortByLastName()">Last Name</th>
  <th ng-click="sortByCountry()">Country</th>
  <th ng-click="sortByAge()">Age</th>

  <tr ng-repeat="x in records">
    <td>{{x.fName}}</td>
    <td>{{x.lName}}</td>
    <td>{{x.country}}</td>
    <td>{{x.age}}</td>
  </tr>
</table>

On click of each column header, I need to sort the records in ascending order and clicking it again should flip the sorting order(descending order). Right now I am using separate functions to sort them. Can anyone suggest a better way to achieve the same? something like using a generic sort function

The markup is invalid. <th> is not allowed as a direct child of <table> — Andreas
– Andreas, Commented Dec 28, 2017 at 13:04

Sajeetharan · Accepted Answer · 2017-12-28 13:06:32Z

2

You can make a generic function with angularjs $filter by passing the sortBy as a parameter to the function

DEMO

var app = angular.module('testApp',[])

app.controller('myCtrl',function($scope,$filter){
$scope.sortBy = function(sortBy){
    $scope.records = $filter('orderBy')($scope.records, sortBy);
}
$scope.records = [
    {
      "fName" : "Alfreds",
      "lName" : "Berglunds",
      "country" : "Germany",
      "age":21
    },
    {   
      "fName" : "Berglunds",
      "lName" : "Alfreds",
      "country" : "Sweden",
      "age":22
    },
    {      
      "fName" : "Centro",
      "lName" : "Ernst",
      "country" : "Mexico",
      "age":23
    },
    {      
      "fName" : "Ernst",
      "lName" : "Centro",
      "country" : "Austria",
      "age":24
    }
  ];
  });

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<body ng-app="testApp">
<table ng-controller="myCtrl" border="1">
  <th ng-click="sortBy('fName')">First Nmae</th>
  <th ng-click="sortBy('lName')">Last Name</th>
  <th ng-click="sortBy('country')">Country</th>
  <th ng-click="sortBy('age')">Age</th>

  <tr ng-repeat="x in records">
    <td>{{x.fName}}</td>
    <td>{{x.lName}}</td>
    <td>{{x.country}}</td>
    <td>{{x.age}}</td>
  </tr>
</table>
</body>

answered Dec 28, 2017 at 13:06

Sajeetharan

223k65 gold badges370 silver badges409 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

gurvinder372 Over a year ago

Your solution works even though th is a direct descendant of table.

gurvinder372 · Accepted Answer · 2017-12-28 13:06:10Z

0

Use this generic sortBy and pass the property name to it

var sortBy = ( prop ) => $scope.records.sort(  function( a, b ){
   return typeof a == "number" ? ( a[ prop ] - b[ prop ] ) : a[ prop ].localeCompare( b[ prop ] );
});

For example

sortBy ( "fName" );

answered Dec 28, 2017 at 13:06

gurvinder372

68.6k11 gold badges78 silver badges98 bronze badges

1 Comment

gurvinder372 Over a year ago

@Sajeetharan I am not aware of angularjs, hence posting only vanilla js solution.

Collectives™ on Stack Overflow

generic function to sort all columns of a table using javascript

2 Answers 2

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related