所以我不能详细解释每一步,但这是我让它工作的方式:
将分页依赖添加到您的模块
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