Angular ui-grid tables, client side pagination and scrolling

问题

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:

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

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.

回答1:

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']);

In the Controller Disable Scrollbars and set rowsPerPage:

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

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

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

Add ui-grid-pagination-Directive to your table

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

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>

That's it!

Hey, just found another method in the sources:

gridApi.pagination.seek(page);

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

来源：https://stackoverflow.com/questions/25891312/angular-ui-grid-tables-client-side-pagination-and-scrolling

标签

angularjs

pagination

angular-ui-grid