ng-Table sorting not working well
Asked Answered
B

4

6

I have created an application using ng-Table, the application is working fine which had generated table using ng-Table. The problem which i am facing is that the table sorting is not working. My code is as given below

HTML:

 <table ng-table="tableParams" class="table">
    <tr ng-repeat="user in $data">
        <td data-title="'Name'" sortable="'name'">
            {{user.name}}
        </td>
        <td data-title="'Age'" sortable="'age'">
            {{user.age}}
        </td>
    </tr>

and my js code:

 var app = angular.module('myApp', ['ngTable']).
controller('mycontroller', function($scope, NgTableParams) 
{
 var data = [{name: "Moroni", age: 50},
            {name: "Tiancum", age: 43},
            {name: "Jacob", age: 27},
            {name: "Nephi", age: 29},
            {name: "Enos", age: 34},
            {name: "Tiancum", age: 43},
            {name: "Jacob", age: 27},
            {name: "Nephi", age: 29},
            {name: "Enos", age: 34},
            {name: "Tiancum", age: 43},
            {name: "Jacob", age: 27},
            {name: "Nephi", age: 29},
            {name: "Enos", age: 34},
            {name: "Tiancum", age: 43},
            {name: "Jacob", age: 27},
            {name: "Nephi", age: 29},
            {name: "Enos", age: 34}];

$scope.tableParams = new NgTableParams({
    sorting: {
        name: 'asc'     
    }
}, {
    getData: function($defer, params) {
        $defer.resolve(data);
    }
});
});

IS THERE ANYTHING WRONG?

Baobaobab answered 16/4, 2016 at 15:15 Comment(0)
D
4

This will work, you need to add $filter for your data.

var app = angular.module('myApp', ['ngTable']).
controller('mycontroller', function($scope, NgTableParams,$filter) 
{
 var data = [{name: "Moroni", age: 50},
            {name: "Tiancum", age: 43},
            {name: "Jacob", age: 27},
            {name: "Nephi", age: 29},
            {name: "Enos", age: 34},
            {name: "Tiancum", age: 43},
            {name: "Jacob", age: 27},
            {name: "Nephi", age: 29},
            {name: "Enos", age: 34},
            {name: "Tiancum", age: 43},
            {name: "Jacob", age: 27},
            {name: "Nephi", age: 29},
            {name: "Enos", age: 34},
            {name: "Tiancum", age: 43},
            {name: "Jacob", age: 27},
            {name: "Nephi", age: 29},
            {name: "Enos", age: 34}];

$scope.tableParams = new NgTableParams({
    sorting: {
        name: 'asc'     
    }
}, {
    getData: function($defer, params) {
        data = $filter('orderBy')(data, params.orderBy());
        $defer.resolve(data);
        //$defer.resolve(data);
    }
});
});
Derr answered 16/4, 2016 at 15:43 Comment(0)
B
1

Try this

<table ng-table="tableParams" class="table">
    <tr ng-repeat="user in $data | orderBy:'-age'"">
        <td data-title="'Name'">
            {{user.name}}
        </td>
        <td data-title="'Age'">
            {{user.age}}
        </td>
    </tr>

OR

    <table class="table">
    <tr>
      <th>Name</th>
      <th>Age</th>
    </tr>
    <tr ng-repeat="user in $data | orderBy:'-age'">
      <td>{{user.name}}</td>
      <td>{{user.age}}</td>
    </tr>
  </table>
Brock answered 16/4, 2016 at 15:28 Comment(0)
T
1

Have you tried Smart table. It is an Angularjs module to easily display data in a table with a set of built in features such filtering,sorting, etc.:

http://lorenzofox3.github.io/smart-table-website/#section-intro

It's simple to use and looks great!

Translate answered 16/4, 2016 at 15:35 Comment(0)
E
1

try this. in ngTable document using this way for binding data to table.

$scope.tableParams = new NgTableParams({
sorting: {
    name: 'asc'     
 }
}, {
dataset: data
});
Encratia answered 16/4, 2016 at 15:42 Comment(0)

© 2022 - 2024 — McMap. All rights reserved.