How to use Angular UI-Grid with Server Side Paging

Question

I'm using AngularJs Ui-Grid.info to display dynamic data grids, I love it but now I have to hook it up to a database table with 60,000 records using server-side filtering and paging and it appears that the pagination options for this plugin is only for client side paging.

Has anyone been able to get this working with Server Side Paging. Do you have a code example.

View Code

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

Part of the Controller

$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;
    });
};

score 31 · Accepted Answer · edited Jul 19 '19 at 03:46

31

There is a server-side pagination option available in the API.

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

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

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

In above example, refer to the code block given below which does the server-side pagination:

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

edited Jul 19 '19 at 03:46

Dale K

25,246
15
42
71

answered Mar 17 '15 at 07:14

guru

4,002
1
28
33

Thanks for the Plunker #guru, that's exactly what I needed – David Cruwys Mar 17 '15 at 23:33
This will be good. Now to integrate with an abstracted, directive version of the ui-grid infinite scroll example.... eck. – FlavorScape Jan 27 '16 at 00:11
1

Why does the '/4' look weird? I copied what you did here on my site, and it looks similarly weird. How can I fix this? – Travis Heeter Aug 05 '16 at 20:45
when i trying to do this i got an error "TypeError: Cannot read property 'on' of undefined" on the "gridApi.pagination.on.paginationChanged" how can i solve this – Yousef Al Kahky Jul 31 '17 at 08:38
1

btw, your plunker needs to use a later version of Angular, since you also dont have the ui-grid version locked down, I was getting angular.merge doesnt exist errors, that was fixed when I referenced angular 1.4.9 (matching my current project) – enorl76 Jun 26 '18 at 18:46

score 0 · Answer 2 · answered Feb 10 '16 at 22:11

0

It is easy to build your own grid by using uib-pagination and ng-repeat. There is a completed example in the following link. Hope this would help.

Angular WebAPI Pagination

answered Feb 10 '16 at 22:11

LENG UNG

473
6
5

How to use Angular UI-Grid with Server Side Paging

2 Answers2

Linked