Angularjs 角网格分页的预期行为是什么？

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

从版本开始，我使用的是Angular 1.2.17、Angular grid（ng grid）2.0.11，还有Jquery 2.1（它领先于ng grid使用的默认依赖版本）

问题1：分页真的是服务器端还是客户端？换句话说，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选项都无法正常工作。如果从pagesize 50开始，然后减小它，这是可以的。但如果我从pagesize 10返回到pagesize 50，它将无法用额外的行更新表内容

真的，只要简单地解释一下预期的行为是什么就好了。这样，我就可以实际报告没有按预期做的事情

我可能应该重新迭代，我相信我可以很好地阅读入门示例的代码。看来：

$scope.totalServerItems

是控制ng grid相信的服务器项目总数的因素。这将设置为传递到方法“setPagingData”的数据的大小：

但在方法“getPagedDataAsync”中，为了设置“数据”的值：

---

当在ng网格上的页面之间进行分页时，将调用上述函数。换句话说，每次单击分页时，它都会向服务器查询完整的结果集。。。这实际上表明，它从服务器获取整个结果集，然后只进行准本地分页。那肯定不是故意的行为？！或者数据服务提供商是否有责任保留有关完整数据大小的信息，并将缓存数据等提供给ng网格表，如果为相同数据召回服务器将是不合适的

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

我们有这样一个getData方法（省略错误处理）：

然后，我们的服务器方法会相应地分页。为确保在分页选项更改时更新，请在分页选项上添加一个监视：

// 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包含项目总数，并从响应头的成功回调中填充它

---

HTH

如果正确设置网格，分页实际上是服务器端的。这有点复杂。我可以向您展示我的设置，它使用php脚本从mysql数据库获取数据。因为这有点长，我想先问你这是否对你有用。@maingay-谢谢你的评论和帮助-如果你有Github回购链接等，请发到这里。现在，我有足够的时间来完成当前的项目，但我可能希望在未来几个月内重新审视这一点，并有兴趣了解您是如何做到的。谢谢Casper，基于我的理解，以及您为确认这一点而提供的解释，我将此作为正确答案授予您。还感谢您提供有关如何填充totalServerItems的信息—使用“x-pagination”响应头，而不是附加到响应体是一个有用的技巧。

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

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