5

我正在尝试将一个小项目从 jquery 移植到 angularjs。我正在使用 DataTables 绘制从我的虚拟机接收到的诊断数据,这是一个示例:

监控部分

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

有没有办法使用 ui-grid 进行客户端分页?当不需要滚动表格时,有没有办法避免陷入鼠标滚动?如果没有,我只需要切换回 ng-grid。

4

1 回答 1

6

所以我不能详细解释每一步,但这是我让它工作的方式:

将分页依赖添加到您的模块

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

在控制器中禁用滚动条并设置 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

于 2014-11-11T10:21:16.937 回答