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

Question

我的密码是

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

如果我这样做，没问题。但那是因为我对 total 进行了硬编码，这显然没有意义。如果我这样做

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

然后它 ng-table 出于某种原因两次触发 http 请求。那么正确的做法是什么？

Answer 1

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

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

注意：上面粘贴的代码是指令的一部分，$timeout 部分是为了避免多次调用（节流），callback() 执行实际的 $http 调用。

从这里为您提供的重要部分可能是：$defer.resolve(data.PageData) 正在为我做这件事也没有像你的情况那样的 return 声明。

Answer 2

假设您使用的是 ng-table 脚本的旧版本之一，第一步是从 api 服务获取数据，然后初始化 ng-table你想要的。

使用 $http 服务，如果请求成功，您将仅一次获取数据，并在该服务中初始化您的 ngTableParams。所以你会避免多次回调的问题。

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

这是我在项目中使用的解决方案，希望对您有所帮助。

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

Answer 3

为此，您需要创建函数，在该函数中调用 api。

对于第二次调用，您需要更改 ngtableparam 名称意味着如果之前是 tableparam 现在您需要创建 tableparam1 或其他名称。

请看下面的代码

点击 ng

    $scope.NextPrev=function(param){
        //code here
        //call another function  
        $scope.tablerefresh($scope.Inedx)
    }
    
     
    $scope.tablerefresh=function(param){
        $scope['tableparater1']={
           reload: function () {},
           settings: function () {return {} }
         }
         $timeout($scope.getdatafromApi(number) ,100); //call those function that gets the data from api
         $scope.tableparater1.reload();
    };
    $scope.getdatafromApi=function(number){
        $.ajax({
           //ajax code here
        }).then (function (response)) {
            data=response;
            $scope.tablaparm.reload(); // reloadfirst call data
        }
       //assigning the data into $scope.tableparater1
       $scope.tableparater1=new ngTableParams({})
    }

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

How can I do server-side pagination with ng-table?

javascript

pagination

angularjs

ngtable