如何在服务器端分页中使用Angular UI-Grid [英] How to use Angular UI-Grid with Server Side Paging

问题描述

我正在使用AngularJs Ui-Grid.info 来显示动态数据网格，我喜欢它，但是现在我必须将其钩住使用服务器端筛选和分页功能最多可以保存包含60,000条记录的数据库表，看来此插件的分页选项仅适用于客户端分页.

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.

任何人都可以通过Server Side Paging使用此功能.你有代码示例吗?

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

查看代码

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

控制器的一部分

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

推荐答案

API中有一个服务器端分页选项.

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

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

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

这篇关于如何在服务器端分页中使用Angular UI-Grid的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！