AngularJS: ngTable with json data: filtering and sorting does not work

Question

I'm trying to populate data from a REST webservice in a table using ngTable. Data are shown, but they are neither sortable nor filterable. Filtering always returns empty list.

Here is a link to the API I am referencing: http://bazalt-cms.com/ng-table/

JS:

$scope.dataInstances = [];
$scope.getDataInstances = function() {
    $http({
        method : 'GET',
        url : '/rest/v1/data/instances',
        headers : {
            "Authorization" : "Basic " + btoa("USERNAME" + ":" + "PASSWORD")
        },
    })
    .success(function(data, status) {
        $scope.dataInstances = data;
        $scope.tableParams.reload();
        // just some logging 
        console.log(JSON.stringify(data));
    })
    .error(function(data, status) {
        alert("Error: " + status);
    });
};
$scope.tableParams = new ngTableParams({
        page: 1,     // show first page
        count: 10,   // count per page
        filter: {
        },
        sorting: {
            date: 'asc'     // initial sorting
        }
    }, 
    {
        total: $scope.dataInstances.length, // length of data
        getData: function($defer, params) {
            // use build-in angular filter
            var filteredData = params.filter() ?
                    $filter('filter')($scope.dataInstances, params.filter()) :
                        $scope.dataInstances;
            var orderedData = params.sorting() ?
                    $filter('orderBy')(filteredData, params.orderBy()) :
                        $scope.dataInstances;
            params.total(orderedData.length); // set total for recalc pagination
            $defer.resolve(orderedData.slice((params.page() - 1) * params.count(), params.page() * params.count()));
        }
});

HTML:

<div ng-controller="myController" ng-init="getDataInstances()">
  <table ng-table="tableParams" show-filter="true" class="table table-condensed">
    <tr ng-repeat="dataInstance in dataInstances">
      <td data-title="'Name'" sortable="'name'" filter="{ 'name' : 'text'}">{{dataInstance.name}}</td>
      <td data-title="'Date'" sortable="'date'" filter="{ 'date' : 'text'}">{{dataInstance.date | date:'dd.MM.yyyy HH:mm' }}</td>
      <td data-title="'Type'" sortable="'type'" filter="{ 'type' : 'text'}">{{dataInstance.type}}</td>
    </tr>
  </table>
</div>

You have any hints how to get this working? Tried different other possible solutions - and none worked - like:

Thanks in advance!

EDIT: http://plnkr.co/edit/1Rp9szNtw8T3GtwpNaZG?p=preview

is filtering and sorting work for type and name columns? — Kostia Mololkin
– Kostia Mololkin, Commented Oct 11, 2014 at 6:33

Community · Accepted Answer · 2017-05-23 12:02:54Z

3

Finally got things working with angular 1.2.20 and ng-Table 0.3.1.

Just have a look at the Plunker: Sorting and filtering over nested json objects and dates.

Thanks to Kostia Mololkin for his efforts!

edited May 23, 2017 at 12:02

CommunityBot

11 silver badge

answered Oct 12, 2014 at 1:18

Second2None

4722 gold badges8 silver badges22 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Kostia Mololkin · Accepted Answer · 2014-10-11 12:24:59Z

1

you need to apply ng-repeat directive to $data variable,wich is used by ngtable

<tr ng-repeat="dataInstance in $data">
            <td data-title="'Name'" sortable="'name'" filter="{ 'name' : 'text'}">{{dataInstance.name}}</td>
            <td data-title="'Date'" sortable="'date'" filter="{ 'date' : 'text'}">{{dataInstance.date | date:'dd.MM.yyyy HH:mm' }}</td>
            <td data-title="'Type'" sortable="'type'" filter="{ 'type' : 'text'}">{{dataInstance.type}}</td>
          </tr>

Edit

Sorting

i got it what's going on the params.orderBy() produce this sting for example "-type" and $filter("OrderBy") can not parse this,this need just "type" string and if you want reverse you have to do $filter('orderBy')(filteredData, "type",-1) this string

edited Oct 11, 2014 at 12:24

answered Oct 11, 2014 at 11:41

Kostia Mololkin

72610 silver badges25 bronze badges

5 Comments

Second2None Over a year ago

Thanks for your answer. Played with this. Sorting works for me only the first click. Filtering does still not work. But your explanation that ngTable uses $data as variable was helpful.

Second2None Over a year ago

Updated Plunk with a few more data. Filtering works - i hav no idea why. Filtering date returns not the initially expected values: the date filter works on the timestamp from json and not on the formatted date string. Any idea how to fix that too?

Kostia Mololkin Over a year ago

let me look what to do with time

Kostia Mololkin Over a year ago

i got it you have to specify custom array filter for collection to do this, some good explanation here toddmotto.com/everything-about-custom-filters-in-angular-js

Kostia Mololkin Over a year ago

i will make plunk for that a little bit later

Second2None · Accepted Answer · 2014-10-11 15:58:45Z

0

Got this running. Seems that there are huge differences using different versions of ng-Table and angular.js. angular 1.2.20 and ng-Table 0.3.0 are working well together on non nested json data.

angular 1.2.20 and ng-Table 0.3.1 does well the sorting of nested data but not filtering (Plunk)

Any solutions to this?

Edit: angular 1.2.3 and ng-Table 0.3.1 would be the solution, but I have to use angular 1.2.20

answered Oct 11, 2014 at 15:58

Second2None

4722 gold badges8 silver badges22 bronze badges

Collectives™ on Stack Overflow

AngularJS: ngTable with json data: filtering and sorting does not work

3 Answers 3

Comments

Edit

Sorting

5 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Edit

Sorting

5 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related