Loading JSON via AJAX with NgTable parameters

Question

I\'m trying to use ngTables to sort and filter data using an AJAX call. Currently I am able to replicate the data with an ng-repeat, but none of my sorting functions apply.

Answer 1

you problem is that you use the local variable data inside your ngTableParams and in the same time you are outside the scope of the success function.

Change your code on something like this:

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

app.controller('myController', function($scope, $http, $filter, ngTableParams) {

 $http.get('http://jsondata.com/myjson.json')
  .success(function(data, status) {
    $scope.data = data;

    $scope.tableParams = new ngTableParams({
        page: 1,            // show first page
        count: 10,          // count per page
        sorting: {
            foo: 'asc'     // initial sorting
        }
    }, {
        total: $scope.data.length, // length of data
        getData: function($defer, params) {
            // use build-in angular filter
            var orderedData = params.sorting() ?
                                $filter('orderBy')($scope.data, params.orderBy()) :
                                $scope.data;

            $defer.resolve(orderedData.slice((params.page() - 1) * params.count(), params.page() * params.count()));
        }
      });
  });


});

See the change from data to $scope.data inside ngTableParams.

Hint: If you just place your ngTableParams inside your success function, is going to work too, without changing data to $scope.data. But, changing the variables will give you a better flexibility if you want to reload() your table.