如何将 Angular UI-Grid 与服务器端分页一起使用答案

【问题标题】：How to use Angular UI-Grid with Server Side Paging如何将 Angular UI-Grid 与服务器端分页一起使用
【发布时间】：2015-03-17 06:42:07
【问题描述】：

我正在使用 AngularJs Ui-Grid.info 来显示动态数据网格，我喜欢它，但现在我必须使用服务器端过滤和分页将它连接到一个有 60,000 条记录的数据库表，而且看起来分页选项此插件仅用于客户端分页。

有没有人能够使用服务器端分页来实现这一点。有代码示例吗？

查看代码

<div class="gridContainer">
    <div id="grid1" ui-grid="gridOptions" class="grid" ui-grid-auto-resize ui-grid-pagination></div>
</div>

控制器的一部分

$scope.gridOptions = {
    enableFiltering: true,
    enableColumnResize: true,
    paginationPageSizes: [25, 50, 75],
    paginationPageSize: 25,
    columnDefs: [
        {
            //field: 'Id', width: 60, displayName: 'Id', enableFiltering: false
            field: 'id', width: 60, displayName: 'Id', enableFiltering: false
        },
        {
            field: 'skill_count',
        },
        {
            field: 'name'
        } 
    ]
};

$scope.loadData = function () {
    skillService.getUnprovisioned(function (data) {
        $scope.gridOptions.data = data;
    });
};

【问题讨论】：

标签： angularjs angular-ui-grid

【解决方案1】：

API 中有一个服务器端分页选项。

http://ui-grid.info/docs/#!/api/ui.grid.pagination.api:GridOptions -> 使用外部分页

这是一个服务器端分页和排序的例子：

http://plnkr.co/edit/UttxPkXG8fYQDX85fnyZ?p=preview

在上面的例子中，请参考下面给出的用于服务器端分页的代码块：

gridApi.pagination.on.paginationChanged($scope, function (newPage, pageSize) {
    paginationOptions.pageNumber = newPage;
    paginationOptions.pageSize = pageSize;
    getPage();
});

【讨论】：

感谢 Plunker #guru，这正是我所需要的
这会很好。现在与 ui-grid 无限滚动示例的抽象指令版本集成.... eck.
为什么'/4'看起来很奇怪？我在我的网站上复制了您在此处所做的操作，它看起来同样奇怪。我该如何解决这个问题？
当我尝试这样做时，我在“gridApi.pagination.on.paginationChanged”上收到错误“TypeError: Cannot read property 'on' of undefined”我该如何解决这个问题
顺便说一句，你的 plunker 需要使用更高版本的 Angular，因为你也没有锁定 ui-grid 版本，我得到了 angular.merge doesn't exist 错误，当我引用时已修复angular 1.4.9（匹配我当前的项目）

【解决方案2】：

使用 uib-pagination 和 ng-repeat 可以轻松构建自己的网格。以下链接中有一个完整的示例。希望这会有所帮助。

Angular WebAPI Pagination

【讨论】：