AngularJS Sorting(using Orderby Filter) Table Data Example

By Hardik Savani November 5, 2023 Category : Angular

Data sort in one of the most important and essential component in any web based projects. we can find data in order by any field then we can find any data easily from reach data.

In this post, we can learn how to sort table row using AngularJS orderby filter. in bellow example you can see we have two column one for language and another for total developer. So if you click on table heading then you can sort data using orderBy filert. You can learn and see bellow example.

Example

Read Also: AngularJS Check Null Empty or Undefined Variable Value Example
<html lang="en-US">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body>

<div ng-app="myApp" ng-controller="customersCtrl">

  <h2 class="text-center">AngularJS sortable table example</h2>

  <div class="text-center">
    <strong>Note:</strong> click on table heading and change order
  </div>

  <div class="container">
    <table class="table table-bordered">

      <tr>
      	<th ng-click="sortBy('language')">Language</th>
      	<th ng-click="sortBy('developer')">Total Developer</th>
      </tr>

      <tr ng-repeat="x in names | orderBy:sortField:reverseOrder">
        <td>{{ x.language }}</td>
        <td>{{ x.developer }}</td>
      </tr>

    </table>
  </div>

</div>

<script>
var app = angular.module('myApp', []);
app.controller('customersCtrl', function($scope, $http) {

    $scope.names = [
    			{'language': 'PHP', 'developer': '11' }, 
    			{'language': 'Laravel', 'developer': '12'},
    			{'language': 'Angular JS', 'developer': '23'},
          		{'language': 'Jquery', 'developer': '25'},
          		{'language': 'Java', 'developer': '21'},
          		{'language': 'Facebook API', 'developer': '26'},
    		];

    $scope.reverseOrder = true;
    $scope.sortField = 'developer';

    $scope.sortBy = function(sortField) {
      $scope.reverseOrder = ($scope.sortField === sortField) ? !$scope.reverseOrder : false;
      $scope.sortField = sortField;
    };
});
</script>

</body>
</html>

You can try....

Tags :
Previous

How to Get Path in Laravel Application Root?
Next

How to Implement Email Verification with Activation Code in Laravel?

We are Recommending you

Popular Posts

Categories

Latest Posts

Shares