AngularJS sorting rows by table header

Question

I have four table headers:

$scope.headers = ["Header1", "Header2", "Header3", "Header4"];

And I want to be able to sort my table by clicking on the header.

So if my table looks like this

H1 | H2 | H3 | H4
A    H    D   etc....
B    G    C
C    F    B
D    E    A

and I click on

H2

my table now looks like this:

H1 | H2 | H3 | H4
D    E    A   etc....
C    F    B
B    G    C
A    H    D

That is, the content of each column never changes, but by clicking on the header I want to order the columns by, the rows will reorder themselves.

The content of my table is created by a database call done with Mojolicious and is returned to the browser with

$scope.results = angular.fromJson(data); // This works for me so far

The rest of the code I have cobbled together looks something like this:

<table class= "table table-striped table-hover">
    <th ng-repeat= "header in headers">
        <a> {{headers[$index]}} </a>
    </th>
    <tr ng-repeat "result in results">
        <td> {{results.h1}} </td>
        <td> {{results.h2}} </td>
        <td> {{results.h3}} </td>
        <td> {{results.h4}} </td>
    </tr>
</table>

How do I order the columns from this point, just by clicking on the header at the top of the table?

Why don't you do <a> {{header}} </a> instead of <a> {{headers[$index]}} </a> ? — Deblaton Jean-Philippe, Oct 1 '13 at 18:15
Both worked. Idk, it seemed more explicit which header was being thrown down. — Zack, Oct 1 '13 at 18:16

Peter Mortensen · Accepted Answer · 2016-09-02 18:08:30Z

I think this working CodePen example that I created will show you exactly how to do what you want.

The template:

<section ng-app="app" ng-controller="MainCtrl">
  <span class="label">Ordered By: {{orderByField}}, Reverse Sort: {{reverseSort}}</span><br><br>
  <table class="table table-bordered">
    <thead>
      <tr>
        <th>
          <a href="#" ng-click="orderByField='firstName'; reverseSort = !reverseSort">
          First Name <span ng-show="orderByField == 'firstName'"><span ng-show="!reverseSort">^</span><span ng-show="reverseSort">v</span></span>
          </a>
        </th>
        <th>
          <a href="#" ng-click="orderByField='lastName'; reverseSort = !reverseSort">
            Last Name <span ng-show="orderByField == 'lastName'"><span ng-show="!reverseSort">^</span><span ng-show="reverseSort">v</span></span>
          </a>
        </th>
        <th>
          <a href="#" ng-click="orderByField='age'; reverseSort = !reverseSort">
          Age <span ng-show="orderByField == 'age'"><span ng-show="!reverseSort">^</span><span ng-show="reverseSort">v</span></span>
          </a>
        </th>
      </tr>
    </thead>
    <tbody>
      <tr ng-repeat="emp in data.employees|orderBy:orderByField:reverseSort">
        <td>{{emp.firstName}}</td>
        <td>{{emp.lastName}}</td>
        <td>{{emp.age}}</td>
      </tr>
    </tbody>
  </table>
</section>

The JavaScript code:

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

app.controller('MainCtrl', function($scope) {
  $scope.orderByField = 'firstName';
  $scope.reverseSort = false;

  $scope.data = {
    employees: [{
      firstName: 'John',
      lastName: 'Doe',
      age: 30
    },{
      firstName: 'Frank',
      lastName: 'Burns',
      age: 54
    },{
      firstName: 'Sue',
      lastName: 'Banter',
      age: 21
    }]
  };
});

This is the closest I got it to working. However, I have some hidden headers, they are only unhidden by opening up a modal and selecting a checkbox (the idea being that you shouldn't have to look at columns that aren't relevant to what you need) The sorting works great for the 4 required columns, but then when I open the modal to select additional headers/columns to display, whenever I next try to do a search, the page reloads..? — Zack, Oct 1 '13 at 20:16
@Zack - If you feel my answer and comment provided a working solution for your original question please accept it so others looking for the solution will easily find it. Thanks. — Adam Thomas, Oct 1 '13 at 20:47
Thanks, no it was not your example but some further things in my code that I did not feel the need to write to get my point across. Those issues have since been fixed and your answer accepted :) — Zack, Oct 1 '13 at 21:27
Thanks so much, I've been looking around for a solution that worked for Angular 1.2 — Eman, May 28 '14 at 16:45

Peter Mortensen · Answer 2 · 2016-09-02 18:12:58Z

up vote 4 down vote

Here is a fiddle that can help you to do this with AngularJS
http://jsfiddle.net/patxy/D2FsZ/

<th ng:repeat="(i,th) in head" ng:class="selectedCls(i)" ng:click="changeSorting(i)">
     {{th}}
</th>

Then something like this for your data:

<tr ng:repeat="row in body.$orderBy(sort.column, sort.descending)">
    <td>{{row.a}}</td>
    <td>{{row.b}}</td>
    <td>{{row.c}}</td>
</tr>

With such functions in your AngularJS controller:

scope.sort = {
    column: 'b',
    descending: false
};

scope.selectedCls = function(column) {
    return column == scope.sort.column && 'sort-' + scope.sort.descending;
};

scope.changeSorting = function(column) {
    var sort = scope.sort;
    if (sort.column == column) {
        sort.descending = !sort.descending;
    } else {
        sort.column = column;
        sort.descending = false;
    }
};

edited Sep 2 at 18:12

Peter Mortensen

10.2k1369107

answered Oct 1 '13 at 18:45

Deblaton Jean-Philippe

4,84421643

this fiddle is using a very old version of angular, so please be aware of that when looking at the code. – Eman May 28 '14 at 16:46

So is the answer... – Deblaton Jean-Philippe May 28 '14 at 17:54

the answer is from 2013, the fiddle is from 2010, the fiddle uses a pre 1.0 version. they are now at 1.2/1.3 – Eman May 30 '14 at 14:47

1

this is my fiddle... the fiddle is from 2013. In 2010 I did not know anything about programming... – Deblaton Jean-Philippe Apr 17 '15 at 12:11

add a comment |

Peter Mortensen · Answer 3 · 2016-09-02 18:13:53Z

Another way to do this in AngularJS is to use a Grid.

The advantage with grids is that the row sorting behavior you are looking for is included by default.

The functionality is well encapsulated. You don't need to add ng-click attributes, or use scope variables to maintain state:

    <body ng-controller="MyCtrl">
        <div class="gridStyle" ng-grid="gridOptions"></div>
    </body>

You just add the grid options to your controller:

  $scope.gridOptions = {
    data: 'myData.employees',
    columnDefs: [{
      field: 'firstName',
      displayName: 'First Name'
    }, {
      field: 'lastName',
      displayName: 'Last Name'
    }, {
      field: 'age',
      displayName: 'Age'
    }]
  };

Full working snippet attached:

var app = angular.module('myApp', ['ngGrid', 'ngAnimate']);
app.controller('MyCtrl', function($scope) {

  $scope.myData = {
    employees: [{
      firstName: 'John',
      lastName: 'Doe',
      age: 30
    }, {
      firstName: 'Frank',
      lastName: 'Burns',
      age: 54
    }, {
      firstName: 'Sue',
      lastName: 'Banter',
      age: 21
    }]
  };

  $scope.gridOptions = {
    data: 'myData.employees',
    columnDefs: [{
      field: 'firstName',
      displayName: 'First Name'
    }, {
      field: 'lastName',
      displayName: 'Last Name'
    }, {
      field: 'age',
      displayName: 'Age'
    }]
  };
});

/*style.css*/
.gridStyle {
    border: 1px solid rgb(212,212,212);
    width: 400px;
    height: 200px
}

<!DOCTYPE html>
<html ng-app="myApp">
    <head lang="en">
        <meta charset="utf-8">
        <title>Custom Plunker</title>
        <link rel="stylesheet" type="text/css" href="http://angular-ui.github.com/ng-grid/css/ng-grid.css" />
        <link rel="stylesheet" type="text/css" href="style.css" />
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
        <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.3/angular.js"></script>
        <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.3/angular-animate.js"></script>
        <script type="text/javascript" src="http://angular-ui.github.com/ng-grid/lib/ng-grid.debug.js"></script>
        <script type="text/javascript" src="main.js"></script>
    </head>
    <body ng-controller="MyCtrl">
        <div class="gridStyle" ng-grid="gridOptions"></div>
    </body>
</html>

The newest ui-grid no longer has a dependence on jQuery. It's still unstable but worth checking out: ui-grid.info — drinck, Feb 13 '15 at 15:50

Peter Mortensen · Answer 4 · 2016-09-02 18:15:33Z

Here is an example that sorts by the header. This table is dynamic and changes with the JSON size.

I was able to build a dynamic table off of some other people's examples and documentation. http://jsfiddle.net/lastlink/v7pszemn/1/

<tr>
    <th class="{{header}}" ng-repeat="(header, value) in items[0]" ng-click="changeSorting(header)">
    {{header}}
  <i ng-class="selectedCls2(header)"></i>
</tr>

<tbody>
    <tr ng-repeat="row in pagedItems[currentPage] | orderBy:sort.sortingOrder:sort.reverse">
        <td ng-repeat="cell in row">
              {{cell}}
       </td>
    </tr>

Although the columns are out of order, on my .NET project they are in order.

Peter Mortensen · Answer 5 · 2016-09-02 18:11:29Z

up vote 0 down vote

Use a third-party JavaScript library. It will give you that and much more. A good example is datatables (if you are also using jQuery): https://datatables.net

Or just order your bound array in $scope.results when the header is clicked.

edited Sep 2 at 18:11

Peter Mortensen

10.2k1369107

answered Oct 1 '13 at 18:16

Eran H.

484311

this should still allow me to use the Json object in retrieving the data from the DB? This looks good bu I sort of need it to work with what I ahve so far. It plays nice with Angular JS? – Zack Oct 1 '13 at 18:19

I don't see why not, searching the web someone already built a directive you can use (though take a look at the code to see if it's written ok): groups.google.com/forum/m/#!topic/angular/vM2DEMK_NMA – Eran H. Oct 1 '13 at 18:21

Alright, I'm going to backup what I have so far and try implenting this, it looks cool enough. Thanks :D – Zack Oct 1 '13 at 18:29

You can also just order your array in $scope.results , but it's a waste of time to make a good UX for that. Plus I gurantee you will need more advanced stuff later that already exists in datatables :) good luck! – Eran H. Oct 1 '13 at 18:32

How can I order my array like you said? I will go back and investigate later, but right no, I just need the columns to be sortable for tomorrow – Zack Oct 1 '13 at 18:52

add a comment |

asked	2 years ago
viewed	59973 times
active	13 days ago

current community

your communities

more stack exchange communities

AngularJS sorting rows by table header

5 Answers 5

Your Answer

Not the answer you're looking for? Browse other questions tagged table angularjs order angularjs-ng-repeat or ask your own question.

Linked

Hot Network Questions

current community

your communities

more stack exchange communities

AngularJS sorting rows by table header

5 Answers 5

Your Answer

Sign up or log in

Post as a guest

Not the answer you're looking for? Browse other questions tagged table angularjs order angularjs-ng-repeat or ask your own question.

Linked

Related

Hot Network Questions