AngularJS sort dynamic table

Question

I have a table that is generated dynamically using Angular 1.6. The data comes from a web API in JSON format. Here is a sample of the data.

{
  "CallData": [
    {
      "TableHeaders": [
        {
          "id": "0",
          "text": "Time"
        },
        {
          "id": "1",
          "text": "January"
        },
        {
          "id": "2",
          "text": "February"
        }
      ],
      "TableRows": [
        {
          "id": "0",
          "cells": [
            {
              "id": "0",
              "text": "7:00"
            },
            {
              "id": "1",
              "text": "0"
            },
            {
              "id": "2",
              "text": "0"
            }
          ]
        },
        {
          "id": "1",
          "cells": [
            {
              "id": "0",
              "text": "8:00"
            },
            {
              "id": "1",
              "text": "18"
            },
            {
              "id": "2",
              "text": "83"
            }
          ]
        }
      ]
    }
  ]
}

Here is my HTML that is generating the table:

<table>
<thead>
    <tr>
        <th ng-repeat="header in data.TableHeaders">
            {{header.text}}
        </th>
    </tr>
</thead>
<tbody>
    <tr ng-repeat="row in data.TableRows">
        <td ng-repeat="cell in row.cells">
            {{cell.text}}
        </td>
    </tr>
</tbody>
</table>

I want to be able to sort my data when I click on the headers. However, I have so far tried to set a sort variable to the id of the headers, using ng-click, and I can see that it updates the variable, but it doesn't sort the data. This was using ng-repeat="row in data.TableRows | orderBy: sortVar"

My sorting code:

// Initialise variable
$scope.sortVar = '0';

<!-- HTML snippet -->
<th ng-repeat="header in data.TableHeaders" ng-click="updateSort(header.id)"></tr>

// function
$scope.updateSort = function(id) {
    $scope.sortVar = id;
}

Is there any way at all to be able to sort my dynamic tables? Am I going to need to add another value to my JSON data in order to do this?

I'm relatively new to angular, so not 100% sure how to achieve this.

If anything is unclear, let me know and I'll try to explain it a bit better.

Cheers

it should work. Add the code that demonstrate how you initialize that softVar. — skyboyer
– skyboyer, Commented Nov 9, 2017 at 16:36

Hoyen · Accepted Answer · 2017-11-09 21:31:36Z

This sort is a bit complicated since it requires going into nested arrays and objects. Here is a sample of how it can be achieved using JavaScript Array's sort function:

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

app.controller('MainCtrl', function($scope) {
  $scope.updateSort = function(index) {

    $scope.data.TableRows = $scope.data.TableRows.sort(function(rowA, rowB) {
      return rowA.cells[index].text.localeCompare(rowB.cells[index].text);
    });
  }
  $scope.sortVar = '0';
  $scope.data = {
    "TableHeaders": [{
      "id": "0",
      "text": "Time"
    }, {
      "id": "1",
      "text": "January"
    }, {
      "id": "2",
      "text": "February"
    }],
    "TableRows": [{
      "id": "0",
      "cells": [{
        "id": "0",
        "text": "7:00"
      }, {
        "id": "1",
        "text": "29"
      }, {
        "id": "2",
        "text": "0"
      }]
    }, {
      "id": "1",
      "cells": [{
        "id": "0",
        "text": "8:00"
      }, {
        "id": "1",
        "text": "18"
      }, {
        "id": "2",
        "text": "83"
      }]
    }]
  }


});

<!DOCTYPE html>
<html ng-app="plunker">

<head>
  <meta charset="utf-8" />
  <title>AngularJS Plunker</title>
  <script>
    document.write('<base href="' + document.location + '" />');
  </script>
  <link rel="stylesheet" href="style.css" />
  <script data-require="[email protected]" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.11/angular.min.js" data-semver="1.5.11"></script>
  <script src="app.js"></script>
</head>

<body ng-controller="MainCtrl">
  <table>
    <thead>
      <tr>
        <th ng-repeat="header in data.TableHeaders" ng-click="updateSort($index)">
          {{header.text}}
        </th>
      </tr>
    </thead>
    <tbody>
      <tr ng-repeat="row in data.TableRows" >
        <td ng-repeat="cell in row.cells">
          {{cell.text}}
        </td>
      </tr>
    </tbody>
  </table>
</body>

</html>

This is exactly what I needed. I never would have thought to use the JS sort function! Thanks

Ricardo Cayetano · Accepted Answer · 2017-11-09 17:25:12Z

0

I used Pagination Directive (it´s easy to use)
https://github.com/michaelbromley/angularUtils/tree/master/src/directives/pagination

example: http://www.expertphp.in/article/how-to-apply-search-sort-and-pagination-in-angularjs-example-using-dir-pagination-controls

Demo: http://demo.expertphp.in/search-sort-and-pagination-angularjs-example/

answered Nov 9, 2017 at 17:25

Ricardo Cayetano

4465 silver badges4 bronze badges

Collectives™ on Stack Overflow

AngularJS sort dynamic table

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related