angularjs - angular ng-grid 分页的预期行为是什么？

Question

AngularJS 是一个优秀的框架，而 ng-grid 非常适合快速获取丰富的表格功能。然而，由于缺乏任何文档，我真的很难理解 ng-grid 的一部分是 ng-grid 分页的预期行为。我可以阅读 ng-grid 入门网站上提供的代码和示例。但我无法理解它无法正常工作的事实是否是我自己的用户错误，或者我使用的 angular 版本是否破坏了 ng-grid 行为。

从版本开始，我使用的是 Angular 1.2.17、angular-grid (ng-grid) 2.0.11 和 Jquery 2.1(它领先于 ng-grid 使用的默认依赖版本)。

问题一:分页真的是Server端还是Client端？换句话说，API 调用是希望从服务器中删除每个结果集行，然后在 UI 中对其进行分页，还是可以真正使用查询参数 limit=x&offset=y 进行服务器端分页。

问题 2:如果 ng-grid 没有预先下拉整个结果集 - 当分页使用离散限制和偏移量时，ng-grid 如何知道项目总数是多少？

下面是我的 UI 代码，它工作正常，$scope.getPagedDataAsync 被调用，转到服务器并仅拉下定义的限制和偏移量。

假设我在服务器上有 50 条记录。我要求 limit=10&offset=10 - 这会给我来自服务器等的记录 11-20。

 $scope.getPagedDataAsync = function (pageSize, page, searchText) {
                setTimeout(function () {
                    var data, limit = pageSize, offset = ((page * pageSize) - pageSize);
                    if (searchText) {
                        var ft = searchText.toLowerCase();
                        DfmAdminAgency.query(function (largeLoad) {
                            data = largeLoad.filter(function (item) {
                                return JSON.stringify(item).toLowerCase().indexOf(ft) !== -1;
                            });
                            $scope.setPagingData(data, page, pageSize);
                        });
                    } else {

                        DfmAdminAgency.query({limit: pageSize, offset: offset}, function (largeLoad) {
                            $scope.setPagingData(largeLoad, page, pageSize);
                        });
                    }
                }, 100);
            };

无论我是否引入限制和偏移，页面大小选项都无法正常工作。如果从说 pagesize 50 开始然后减少它就可以了。但是，如果我再从 pagesize 10 返回到 pagesize 50，则无法使用额外的行更新表内容。

真的，对预期行为的一些简单解释将不胜感激。这样我就可以实际报告没有按预期执行的操作。

我可能应该重复一遍，我相信我可以很好地阅读入门示例的代码。看起来:

$scope.totalServerItems

是控制 ng-grid 认为是服务器项目总数的东西。这被设置为传递给方法“setPagingData”的数据的大小:

$scope.totalServerItems = data.length;

但是在方法“getPagedDataAsync”中，为了设置“data”的值:

DfmAdminAgency.query(function (largeLoad) {
                    $scope.setPagingData(largeLoad, page, pageSize);
                });

当在 ng-grid 上的页面之间分页时，上面会被调用。换句话说，每次点击分页时，它都会向服务器查询完整的结果集......这实际上表明，它正在从服务器获取整个结果集，然后只是进行准本地分页.这肯定不是有意的行为？!还是数据服务提供者有责任保留有关完整数据大小的信息，并缓存数据等以提供给 ng-grid 表，而为相同数据调用服务器是不合适的？

Answer 1

正如我在 ng-grid 文档中看到的示例，它仅用于模拟服务器调用。网格确实与服务器端分页一起工作，但由服务器来做出适当的响应，我假设您已经处理过。您没有包含您的 setPagingData 方法，但如果它类似于文档，您可能已经混合了服务器端和客户端分页。

我们有一个这样的 getData 方法(省略错误处理):

function getData() {
    $resource(urlService.getBaseUrl() + $scope.restUrl + ':id').query({
        page: $scope.pagingOptions.currentPage,
        pageSize: $scope.pagingOptions.pageSize
    }, function (responseItems, getResponseHeaders) {
        var xPageObject = getResponseHeaders('x-pagination');
        xPageObject = angular.fromJson(xPageObject);
        if (xPageObject) {
            $scope.totalPages = xPageObject.TotalPages;
            $scope.totalItems = xPageObject.TotalCount;
        } else {
            console.log("No paging header found");
        }
    $scope.items = responseItems;
    });
}

我们的服务器方法然后适本地分页。为确保我们在分页选项更改时更新，请在分页选项上添加监视:

// Listen on changes to currentPage and reload when updated
$scope.$watch('pagingOptions', function (newVal, oldVal) {
    if (newVal !== oldVal) {
        if (newVal.pageSize !== oldVal.pageSize) {
             newVal.currentPage = 1;
        }
        getData();
        }
}, true);

这将确保对分页所做的任何更改都会导致新的请求。

关于您的 totalServerItems 问题，它在网格将使用的范围变量的选项中定义:

$scope.options = {
        columnDefs: 'columnDefinitions',
        data: 'items',
        totalServerItems: 'totalItems'
 };

在我的情况下， $scope.totalItems 包含项目的总数，它会从响应 header 的成功回调中填充。

HTH