Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

ng-Table sorting not working well

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?

like image 767
karl42 Avatar asked Apr 16 '16 15:04

karl42


4 Answers

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);
    }
});
});
like image 198
sreeramu Avatar answered Nov 15 '22 08:11

sreeramu


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>
like image 32
Wasiq Muhammad Avatar answered Nov 15 '22 07:11

Wasiq Muhammad


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!

like image 33
Tim Cobra Avatar answered Nov 15 '22 07:11

Tim Cobra


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

$scope.tableParams = new NgTableParams({
sorting: {
    name: 'asc'     
 }
}, {
dataset: data
});
like image 45
Hadi J Avatar answered Nov 15 '22 09:11

Hadi J