How to use Angular UI-Grid with paging on the server

Question

I use AngularJs Ui-Grid.info to display dynamic data grids, I like it, but now I have to connect it to a database table with 60,000 records using server-side filtering and paging, and it seems that the pagination options for this plugin intended for client-side page only.

Someone could get this by working with the server page. You have some sample code.

Code view

<div class="gridContainer"> <div id="grid1" ui-grid="gridOptions" class="grid" ui-grid-auto-resize ui-grid-pagination></div> </div> 

Controller part

 $scope.gridOptions = { enableFiltering: true, enableColumnResize: true, paginationPageSizes: [25, 50, 75], paginationPageSize: 25, columnDefs: [ { //field: 'Id', width: 60, displayName: 'Id', enableFiltering: false field: 'id', width: 60, displayName: 'Id', enableFiltering: false }, { field: 'skill_count', }, { field: 'name' } ] }; $scope.loadData = function () { skillService.getUnprovisioned(function (data) { $scope.gridOptions.data = data; }); }; 

Answer 1

The API has a server-side paging option.

http://ui-grid.info/docs/#!/api/ui.grid.pagination.api:GridOptions → useExternalPagination

Here is an example of pagination and server-side sorting:

http://plnkr.co/edit/UttxPkXG8fYQDX85fnyZ?p=preview

In the above example, refer to the code block below, which performs pagination on the server side:

 gridApi.pagination.on.paginationChanged($scope, function (newPage, pageSize) { paginationOptions.pageNumber = newPage; paginationOptions.pageSize = pageSize; getPage(); }); 

Answer 2

Easily create your own grid using uib-pagination and ng-repeat . The link below is an example. Hope this helps.

Angular Pagination WebAPI