如何使用Angular UI-Grid与服务器端分页

Dav*_*wys 11 angularjs angular-ui-grid

我正在使用AngularJs Ui-Grid.info来显示动态数据网格,我喜欢它,但现在我必须使用服务器端过滤和分页将其连接到具有60,000条记录的数据库表,并且看起来这个分页选项插件仅用于客户端分页.

有没有人能够使用Server Side Paging.你有一个代码示例吗?

查看代码

<div class="gridContainer">
    <div id="grid1" ui-grid="gridOptions" class="grid" ui-grid-auto-resize ui-grid-pagination></div>
</div>
Run Code Online (Sandbox Code Playgroud)

控制器的一部分

$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;
    });
};
Run Code Online (Sandbox Code Playgroud)

gur*_*uru 30

API中提供了服务器端分页选项.

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

以下是服务器端分页和排序的示例.

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

在上面的示例中,请参阅下面给出的代码块,该代码块执行服务器端分页,

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