CODEWITHSUNDEEP
angularjspaginationangular-ui-grid
Slartibartfast
Slartibartfast

Reputation: 487

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:

Monitor section

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.

Upvotes: 5

Views: 7115

Answers (1)

nabinca
nabinca

Reputation: 2022

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

Upvotes: 6

Related Questions