web-dev-qa-db-ja.com

Angularサーバー側のページングを使用したUI-Gridの使用方法

私はAngularJs i-Grid.info を使用して動的データグリッドを表示していますが、それが大好きですが、サーバー側のフィルタリングとページングを使用して、60,000レコードのデータベーステーブルにフックする必要がありますこのプラグインのページ付けオプションは、クライアント側のページング専用です。

誰もがサーバーサイドページングでこれを機能させることができましたか？コード例はありますか？.

コードを見る

<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;
    });
};
angularjsangular-ui-grid
11
David Cruwys

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

uib-paginationおよびng-repeatを使用すると、独自のグリッドを簡単に構築できます。次のリンクに完成した例があります。これが役立つことを願っています。

Angular WebAPI Pagination

0
LENG UNG