Angular ui-grid表，客户端分页和滚动

Question

我试图将一个小项目从jquery移植到angularjs。我使用DataTables绘制从我的虚拟机收到的诊断数据，这是一个例子：

DataTables可以轻松对数据进行分页，这样可以在导航时不捕获鼠标滚动，这是当您的页面包含大量表格时的最佳解决方案。我现在尝试使用angular-ui中的ui-grid做同样的事情但是ng-grid中存在的分页选项不再存在（或者至少我无法找到它们）

有没有办法使用ui-grid进行客户端分页？还有一种方法可以避免在不需要滚动表格的情况下捕获鼠标滚动吗？如果不是，我只需要切换回ng-grid。

Answer 1

所以我无法详细解释每一步，但这是我开始工作的方式：

为您的模块添加分页依赖

var app = angular.module('app', ['ui.grid', 'ui.grid.pagination']);

在Controller Disable Scrollbars中设置rowsPerPage：

$scope.gridOptions.enableScrollbars = false;
$scope.gridOptions.rowsPerPage = 15;

不要忘记注册API（也在Controller中）：

$scope.gridOptions.onRegisterApi = function (gridApi) {
    $scope.gridApi = gridApi;
}

将ui-grid-pagination-Directive添加到您的表格

<div ui-grid="gridOptions" ui-grid-pagination class="grid" external-scopes="$scope"></div>

现在在HTML-Partial中添加按钮（我使用了Fontawesome和Bootstrap，但你不必这样做）：

<button type="button" class="btn btn-default" ng-click="gridApi.pagination.previousPage()">
    <span class="fa fa-angle-left"></span>
</button>
<span>Page: {{ gridApi.pagination.getPage() }}</span>
<span>/ {{ gridApi.pagination.getTotalPages() }}</span>
<button type="button" class="btn btn-default" ng-click="gridApi.pagination.nextPage()">
    <span class="fa fa-angle-right"></span>
</button>

就是这样！

嘿，刚刚在消息来源中找到了另一种方法：

gridApi.pagination.seek(page);

还想提一下我使用ui-grid v3.0.0-rc.12