Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to use Angular UI-Grid with Server Side Paging

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;
    });
};
like image 398
David Cruwys Avatar asked Mar 17 '15 06:03

David Cruwys


1 Answers

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();
});
like image 67
guru Avatar answered Sep 18 '22 15:09

guru