angularjs – Angular ui-grid表,客户端分页和滚动

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

为您的模块添加分页依赖项

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.get@R_934_10586@lPages() }}</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