Loading JSON via AJAX with NgTable parameters
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.
$defer need to be resolved within the getData, after the ajax call is completed. As in the example You provided, the ajax call is inside the getData:
var app = angular.module('app', ['ngTable']);app.controller('myController', function($scope, $http, $filter, ngTableParams) {$scope.tableParams = new ngTableParams({ page: 1, // show first page count: 10, // count per page sorting: { foo: 'asc' // initial sorting }}, { total: data.length, // length of data getData: function($defer, params) { $http.get('http://jsondata.com/myjson.json') .success(function(data, status) { // use build-in angular filter var orderedData = params.sorting() ? $filter('orderBy')(data, params.orderBy()) : data; $defer.resolve(orderedData.slice((params.page() - 1) * params.count(), params.page() * params.count())); }); } });});
First step is to put quotes around your sortable attribute:
<td data-title="foo" sortable="'foo'">{{user.foo}}</td>
ngTable expects an expression there.
Second step is to check which version of ngTable you're using, and if it's 0.3.2 check out this ngTable issue: https://github.com/esvit/ng-table/issues/204
Good luck)