如何使用ng-table进行服务器端分页？

My code is

我的代码是

$scope.loadQuestions = function() {
  $scope.questionCount = 0;
  $scope.questionTable = new NgTableParams({
    count: []
  }, {
    total: 19387,
    getData: function($defer, params) {
      $scope.filter.sort = params.orderBy();
      $scope.filter.page = params.page();
      return $http.get("/api/questions", {
        params: $scope.filter
      }).then(function(response) {
        $scope.questionCount = response.data.count;
        return response.data.questions;
      });
    }
  });
};

If I do this, it's fine. But that's because I hardcoded the total, which doesn't make sense obviously. If I do

如果我这样做,那很好。但那是因为我对总数进行了硬编码,这显然没有意义。如果我做

  return $http.get("/api/questions", {
    params: $scope.filter
  }).then(function(response) {
    params.total(response.data.count);
    $scope.questionCount = response.data.count;
    return response.data.questions;
  });

then it ng-table fires the http request twice for some reason. So what's the right way to do it?

那么ng-table由于某种原因触发了两次http请求。那么正确的方法是什么?

2 个解决方案

#1

In assuming that you are using one of the older versions of ng-table script, the first step is to get the data from your api service, and then to intialize the parameters for ng-table that you want.

假设您使用的是旧版本的ng-table脚本,第一步是从api服务获取数据,然后初始化所需的ng-table参数。

With $http service you will get the data only ONE TIME if the request is successful, and inside that service initialize your ngTableParams. So you will avoid problems with multiple callbacks.

使用$ http服务,如果请求成功,您将只获得一次数据,并在该服务内部初始化您的ngTableParams。因此,您将避免多次回调的问题。

Note also the changes in getData part how ordering and filtering are solved with pagination.

另请注意getData部分中的更改如何通过分页来解决排序和过滤。

Here is the solution that I used for my projects, hope it helps.

这是我用于项目的解决方案,希望它有所帮助。

$http.get('/api/questions').success(function (data) {
                $scope.questionTable = new ngTableParams({
                    page: 1,
                    count: 10
                },
                {
                  total: data.length,
                  getData: function ($defer, params) {
                    var filteredData = params.filter() ? $filter('filter')(data, params.filter()) : data;
                    var orderedData = params.sorting() ? $filter('orderBy')(filteredData, params.orderBy()) : data;
                    params.total(orderedData.length);
                    $defer.resolve(orderedData.slice((params.page() - 1) * params.count(), params.page() * params.count()));
                }
        });
});

#2

I am not entierly sure if below would solve your issue, but I do use below code and its not causing double call issue

我不确定下面是否会解决您的问题,但我确实使用下面的代码并且它不会导致双重调用问题

                getData: function ($defer, params) {
                    if (timeout) $timeout.cancel(timeout);
                    timeout = $timeout(function () {
                        callback().then(function (data) {
                            params.total(data.TotalCount);
                            $defer.resolve(data.PageData);
                        });
                    }, 700);
                }

Note: code pasted above is part of a directive, the $timeout part is to avoid multiple calls (throttling) and callback() does the actual $http call.

注意:上面粘贴的代码是指令的一部分,$ timeout部分是为了避免多次调用(限制),而callback()执行实际的$ http调用。

The important part to take for you from here is may be: $defer.resolve(data.PageData) is doing the trick for me also there is no return statement like it is there in your case.

从这里开始的重要部分可能是:$ defer.resolve(data.PageData)正在为我做伎俩也没有返回语句,就像你的情况一样。

#1