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:

• asynchronously populating an AngularJS ngTable with json data
• Loading JSON via AJAX with NgTable parameters
• Sorting ngTable doesn't work when heading gets clicked

Thanks in advance!

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

Anybody

is filtering and sorting work for type and name columns? – Pedagogy

No. It does not work in general. – Anybody

plunk will be usefull here,can you set up it? – Pedagogy

edited post with link to plunk – Anybody

its great trick , works fine for me. – Enteritis

Answer 1

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!

Anybody

Answer 2

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

Pedagogy

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. – Anybody

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? – Anybody

let me look what to do with time – Pedagogy

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 – Pedagogy

i will make plunk for that a little bit later – Pedagogy

Answer 3

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

Anybody