如何在服务器端分页中使用Angular UI-Grid

Question

我正在使用AngularJS Ui-Grid.info来显示动态数据表格，我很喜欢它，但现在我必须将其连接到一个包含60000条记录的数据库表格，使用服务器端过滤和分页，而该插件的分页选项仅适用于客户端分页。

有人能够将其与服务器端分页结合使用吗？你有代码示例吗？

查看代码

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

- David Cruwys

Answer 1

API提供了一种服务器端分页选项。

http://ui-grid.info/docs/#!/api/ui.grid.pagination.api:GridOptions -> useExternalPagination

下面是一个服务器端分页和排序的示例:

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

在上面的示例中，请参考下面提供的代码块，该代码块执行服务器端分页:

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

- guru

---

感谢Plunker #guru，这正是我所需要的。 - David Cruwys

您IP地址为143.198.54.68，由于运营成本限制，当前对于免费用户的使用频率限制为每个IP每72小时10次对话，如需解除限制，请点击左下角设置图标按钮（手机用户先点击左上角菜单按钮）。 - FlavorScape

为什么'/4'看起来很奇怪？我在我的网站上复制了你的代码，结果也很奇怪。我该如何解决这个问题？ - Travis Heeter

当我尝试这样做时，出现了一个错误：“TypeError: Cannot read property 'on' of undefined”，在“gridApi.pagination.on.paginationChanged”上。我该如何解决这个问题？ - Yousef Al Kahky

顺便说一下，你的 Plunker 需要使用更新版本的 Angular。由于你没有锁定 ui-grid 版本，我在使用时遇到了 angular.merge 不存在的错误。当我引用与我的当前项目匹配的 angular 1.4.9 时，问题得到了解决。 - enorl76

Answer 2

使用 uib-pagination 和 ng-repeat 轻松创建自己的网格。

以下链接中有一个完整的示例，希望这可以帮到您：

Angular WebAPI 分页

- LENG UNG