Question

我有一个位于factory

内的函数

 API.doRetrieveResults = function(name, id, values, row) {
  // alert(angular.toJson(values));
  var getdata = {
    'operation': 'RetrieveResults',
    'name': name,
    'ds_blockid': id,
    'values': angular.toJson(values),
    'row': row
  };
  return $http({
    method: 'GET',
    url: _myurl,
    params: getdata
  });
};

这将返回一个记录超过6K的数组。

我想要的是使用ngTable显示它。

我尝试过像

这样的事情

$scope.tableParams = new NgTableParams({
  page: 1, // show first page
  count: 10 // count per page
}, {
  filterDelay: 300,
  getData: function(params) {
    return API.doRetrieveResults($scope.module, $scope.id, $scope.values, $scope.row).then(function(response) {
      params.total(response.data.result.records.inlineCount);    
      return response.data.result.records;
    });
  }
});

即使在Chrome的开发者工具上观看网络标签时，我也可以看到数据即将到来，我的桌子上什么都没有显示。

另一方面，这样的事情

$scope.tableParams = new NgTableParams({
    page: 1, // show first page
    count: 10 // count per page
  }, {
    filterDelay: 0,
    getData: function($defer, params) {
      API.doRetrieveResults($scope.module, $scope.id, $scope.values, $scope.row).then(function(response) {
        $scope.totalData = response.data.result.total;
        $scope.data = response.data.result.records;

        var orderedData = params.filter ?
          $filter('filter')($scope.data, params.filter()) : $scope.data;

        params.total($scope.totalData); // set total for recalc pagination
        $defer.resolve(orderedData.slice((params.page() - 1) * params.count(), params.page() * params.count()));
      });
    }
  });

会工作，各种值会显示在表格中，但每次我尝试更改页面时，我都可以看到再次调用我的API，我必须再次等待所有数据来。

如何正确解决此问题，最好是我想加载一次数据，然后将所有内容传递给ngTable进行显示。

Answer 1

您在页面更改时调用了什么功能？您已经拥有$ scope.data中的所有行。

这是一个如何做到的例子，在我的服务中，我调用web服务并检索由searchtext过滤的项目：

$scope.data = [];
$scope.dataFiltered = [];

$scope.page = 1;
$scope.numPages = 0;
$scope.rowsPerPage = 10;
$scope.numdata = 0;

$scope.searchData = function() {

  $scope.data = [];
  $scope.dataFiltered = [];
  $scope.page = 1;
  $scope.numPages = 0;
  //$pageLoadingBar.showLoadingBar();

  // call your API retrieve all data once
  YourApiFactory.findData($scope.searchText.value,
    function(dataFound) {

      $scope.data = dataFound;

      $scope.numdata = dataFound.length;
      $scope.numPages = Math.ceil($scope.numdata / $scope.rowsPerPage);

      // Display showing data from to
      $scope.dataTo = $scope.page * $scope.rowsPerPage;
      $scope.dataFrom = $scope.filesTo - $scope.rowsPerPage;

      $scope.updateDataTable ();

      //$pageLoadingBar.hideLoadingBar();
    });

};


$scope.updateDataTable = function() {
  var begin = (($scope.page - 1) * $scope.rowsPerPage),
    end = begin + $scope.rowsPerPage;
  $scope.dataFiltered = $scope.data.slice(begin, end);
}

$scope.nextPage = function() {
  if ($scope.page < $scope.numPages) {
    $scope.page++;
    $scope.updateDataTable ();
  }
};

$scope.previousPage = function() {
  if ($scope.page > 1) {
    $scope.page--;
    $scope.updateDataTable ();
  }
};

尝试使用来自我的API的数据来使用ngTable

1 个答案: