Angular ui-grid tables, client side pagination and scrolling

Question

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.

Sandbox

Have you found a solution to this problem ? – Bile

Actually no, so I switched my project to ng-grid for the moment – Sandbox

I used a normal pagination control from bootstrap package but it feels a little bit weird. – Bile

Answer 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

Elayneelazaro

I gave this error: TypeError: Cannot set property 'onRegisterApi' of undefined at new <anonymous> – Panoply