Javascript 使用NgTable参数通过AJAX加载JSON

我正在尝试使用ngTables，通过AJAX调用对数据进行排序和过滤。目前，我可以使用ng repeat复制数据，但我的排序功能都不适用。我引用了这个示例，并能够使用mock.js文件使其工作，但现在我使用的是加载到Web服务器上的文件，似乎无法使其工作

我相信答案很简单，非常感谢您的帮助。我附加了我的标记以向您展示我的控制器和html文件的外观。谢谢大家，如果您需要更多信息，请告诉我

这里有一些指向我正在引用的API的链接

HTML:

<div ng-controller="myController">
  <table ng-table="tableParams" show-filter="true" class="table table-condensed">
    <tr ng-repeat="user in data">
      <td data-title="foo" sortable="foo">{{user.foo}}</td>
      <td data-title="bar" sortable="bar">{{user.bar}}</td>
    </tr>
  </table>
</div>

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: data.length, // length of data
    getData: function($defer, params) {
        // 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()));
    }
  });
});

---

第一步是在可排序属性周围加引号：

  <td data-title="foo" sortable="'foo'">{{user.foo}}</td>

{{user.foo}

ngTable需要一个表达式

第二步是检查您使用的是哪个版本的ngTable，如果是0.3.2，请查看此ngTable问题：

---

祝您好运）

$defer需要在ajax调用完成后在getData中解决。在您提供的示例中，ajax调用位于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()));
            });
        }
    });
});

---

您的问题是，您在

ngTableParams

中使用了局部变量数据，但同时超出了

success

函数的范围

更改类似以下内容的代码：

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()));
        }
      });
  });


});

请参见

ngTableParams

中从

data

到

$scope.data

的更改

提示：如果您只是将

ngTableParams

放在

success

函数中，也可以工作，而不将

数据

更改为

$scope.data

。但是，如果希望

重新加载（）

表，则更改变量将为您提供更好的灵活性。

<tr ng-repeat="user in $data">
      <td data-title="foo" sortable="foo">{{user.foo}}</td>
      <td data-title="bar" sortable="bar">{{user.bar}}</td>
</tr>

{{user.foo}}
{{user.bar}

您可以直接引用js中的数据，无需

$scope.data=data

。

---

我试过了，而且工作得很好。

每次有人对排序进行更改时，都会调用getData函数，这意味着您将在每次排序中对新数据进行ajax调用。我认为这是没有效率的。Hi@michas84-它对我来说工作得很好，但是如果我们想对任何列进行排序，它每次都会调用服务器来获取表数据。是否有一种方法可以一次性获取服务器数据并在客户端处理我们想要的任何数据？我遵循相同的方法，但控制台显示错误：orderedData.slice不是一个函数为什么？Hi@Raihan-这是因为您返回的是对象而不是数组，在js数组中有slice函数。这里首先要将json对象转换为arr。