How to sort data in AngularJS by clicking on a column to change the order from ascending to

Question

How to sort data in AngularJS by clicking on a column to change the order from ascending to

The code view below is what I am currently working with:

<tr ng-repeat="c in clients | orderBy:'code'">
    <td>{{c.firstname}} {{c.lastname}}</td>
    <td>{{c.telephone}}</td>
    <td>{{c.location}}</td>
    <td>{{c.code}}</td>
</tr>

I am looking to dynamically change the orderBy parameter when a column is clicked. For example, if a user clicks on the location column, I want the orderBy condition to switch to 'location' instead of 'code'. The updated form should look like this:

<tr ng-repeat="c in clients | orderBy:'location'">

javascript angularjs sorting

Answer 1

Answer №1

angular.module('app', []).controller('ctrl', function($scope) {
  $scope.prefix = '-';
  $scope.order = '';
  $scope.sortData = function(type) {
    $scope.prefix = $scope.prefix === '-' ? '+' : '-';
    $scope.order = $scope.prefix + type;
  }
  $scope.arrowDirection = function(type){
    if($scope.order.indexOf(type) !== -1)
      return $scope.prefix === '+' ? '↑' : '↓';
    return '';
  }

  $scope.items = [
    { name: 'Alice', age: 28 },
    { name: 'Bob', age: 35 },
    { name: 'Eve', age: 22 },
    { name: 'Dan', age: 31 },
    { name: 'Grace', age: 40 }
  ]
})

table,
th,
td {
  border: 1px solid black;
  border-collapse: collapse;
}
th{
  cursor: pointer
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<table ng-app='app' ng-controller='ctrl'>
  <thead>
    <tr>      
      <th ng-click='sortData("name")'>Name {{arrowDirection("name")}}</th>
      <th ng-click='sortData("age")'>Age {{arrowDirection("age")}}</th>
    </tr>
  </thead>
  <tbody>
    <tr ng-repeat="item in items | orderBy:order">
      <td>{{item.name}}</td>
      <td>{{item.age}}</td>
    </tr>
  </tbody>
</table>

Answer 2

angular.module('app', []).controller('ctrl', function($scope) {
  $scope.prefix = '-';
  $scope.order = '';
  $scope.sortData = function(type) {
    $scope.prefix = $scope.prefix === '-' ? '+' : '-';
    $scope.order = $scope.prefix + type;
  }
  $scope.arrowDirection = function(type){
    if($scope.order.indexOf(type) !== -1)
      return $scope.prefix === '+' ? '↑' : '↓';
    return '';
  }

  $scope.items = [
    { name: 'Alice', age: 28 },
    { name: 'Bob', age: 35 },
    { name: 'Eve', age: 22 },
    { name: 'Dan', age: 31 },
    { name: 'Grace', age: 40 }
  ]
})

table,
th,
td {
  border: 1px solid black;
  border-collapse: collapse;
}
th{
  cursor: pointer
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<table ng-app='app' ng-controller='ctrl'>
  <thead>
    <tr>      
      <th ng-click='sortData("name")'>Name {{arrowDirection("name")}}</th>
      <th ng-click='sortData("age")'>Age {{arrowDirection("age")}}</th>
    </tr>
  </thead>
  <tbody>
    <tr ng-repeat="item in items | orderBy:order">
      <td>{{item.name}}</td>
      <td>{{item.age}}</td>
    </tr>
  </tbody>
</table>

Answer 3

Answer №2

Implement datatables.js to simplify sorting tasks Access the CSS file for datatables.js here

Download the JavaScript file for datatables.js here

Answer 4

Implement datatables.js to simplify sorting tasks Access the CSS file for datatables.js here

Download the JavaScript file for datatables.js here

Answer 5

Answer №3

To implement sorting on the column, use ng-click and call a function named setSortByParameter to set the parameter sortBy.

Now, include the following code for orderBy:

<tr ng-repeat="c in clients | orderBy:'{{sortBy}}'">

Answer 6

To implement sorting on the column, use ng-click and call a function named setSortByParameter to set the parameter sortBy.

Now, include the following code for orderBy:

<tr ng-repeat="c in clients | orderBy:'{{sortBy}}'">

How to sort data in AngularJS by clicking on a column to change the order from ascending to

Answer №1

Answer №2

Answer №3

Similar questions

The issue of req.file being undefined when using Multer in Node.js with Express Router

Easily validating forms using javascript

Exploring, navigating, and cycling through JSON in Node.js

Steps to adding a collection of links (stylesheets, javascript files) to each html document

What is the best way to secure videos and other static files with authentication in a next.js web application?

Guide to using JavaScript to multiply the values from two text fields and showing the result in a separate text field

JavaScript's Blob to Base64 conversion using FileReader is failing to produce any output

Utilize SCSS values within TypeScript by applying them on a class level

Analyzing the current time against a user-inputted time using Javascript

Is there a way to change the format of the date "Wed Jan 01 2020 00:00:00 GMT+0530 (India Standard Time)" to JAN 01, 2020 in JavaScript?

Transitioning from traditional Three.js written in vanilla JavaScript to React Three Fiber involves a shift in

When trying to apply styles using ng-style attribute with jQuery, Angular does not seem to

Issue with Angular 6 subscribe event not being caught by subject?

Obtaining Position Coordinates of an Element Linked to an Object in AngularJS $scope

Exploring logfile usage in JavaScript. What is the best way to structure the log?

Finding the length of a filter in an AngularJS directive

Exploring the Art of Programming SVG

What is the procedure for generating a mouse event for clicking a tab in Selenium WebDriver?

I'm facing some difficulties in sourcing my header into a component and encountering errors. Can anyone advise me on how to properly outsource my header?

Can we find a different way to address this issue with a "functional programming" mindset that doesn't involve utilizing the `forEach` method?