Подтвердить что ты не робот

Как использовать Angular UI-Grid с страничным пейджингом на сервере

Я использую AngularJs Ui-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;
    });
};
4b9b3361

Ответ 1

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

Ответ 2

Легко создать собственную сетку, используя uib-pagination и ng-repeat. В приведенной ниже ссылке приведен пример. Надеюсь, это поможет.

Angular Паганирование WebAPI