角UI格表，客户端分页和滚动 [英] Angular ui-grid tables, client side pagination and scrolling

问题描述

我试图端口一个小项目，从jQuery来angularjs。我用数据表绘制从我的虚拟机接收的诊断数据，这是一个例子：

I'm trying to port a small project from jquery to angularjs. I was using DataTables to plot diagnostic data received from my virtual machines, this is an example:

数据表可以很容易地分页数据，这有导航时，这是最好的解决方案时，您的网页包含了大量的表没有捕捉鼠标滚轮的利益。现在我想从使用角度的UI界面格但为present在NG-电网分页选项，做同样的事情并不present了（至少我没能找到它们）。

DataTables makes it easy to paginate the data, this has the benefit of not capturing the mouse scroll while navigating, which is the best solution when your pages contain a lot of tables. I'm now trying to do the same thing using ui-grid from angular-ui but the pagination options that were present in ng-grid are not present anymore (or at least I wasn't able to find them).

有没有办法使用的UI网做客户端分页？ ，是有办法避免捕获鼠标的滚动时，有没有必要滚动表？如果没有我就必须要切换回NG-电网。

Is there a way to do client side pagination using ui-grid? And is there a way to avoid trapping the mouse scroll when there's no need to scroll the table? If not I'll just have to switch back to ng-grid.

推荐答案

所以我不能详细解释每一个步骤，但这里是我的方式得到它的工作：

So i cannot explain every step in detail, but here is the way i got it working:

添加依赖关系为分页到您的模块

Add Dependency for Pagination to your module

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

在控制器禁用滚动条，并设置rowsPerPage：

In the Controller Disable Scrollbars and set rowsPerPage:

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

不要忘了注册API（也在控制器）：

Don't forget to register the API (also in the Controller):

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

UI并网分页-指令添加到您的表

Add ui-grid-pagination-Directive to your table

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

现在添加按钮在你的HTML的部分（我用Fontawesome和引导，但你不必）：

Now add Buttons in your HTML-Partial (i used Fontawesome and Bootstrap, but you don't have to):

<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>

这就是它！

嘿，只是发现在源的另一种方法：

Hey, just found another method in the sources:

gridApi.pagination.seek(page);

也想提一提，我使用的UI网V3.0.0-rc.12

Also wanted to mention that i use ui-grid v3.0.0-rc.12

这篇关于角UI格表，客户端分页和滚动的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！