web-dev-qa-db-fra.com

Comment utiliser la grille d'interface utilisateur angulaire avec la pagination côté serveur

J'utilise AngularJs Ui-Grid.info pour afficher des grilles de données dynamiques, j'adore mais je dois maintenant le relier à une table de base de données contenant 60 000 enregistrements à l'aide du filtrage et de la pagination côté serveur. Les options de pagination de ce plug-in ne concernent que la pagination côté client.

Est-ce que quelqu'un a réussi à faire fonctionner cela avec la pagination côté serveur? Avez-vous un exemple de code.

Voir le code

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

Une partie du contrôleur

$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

Une option de pagination côté serveur est disponible dans l'API.

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

Voici un exemple de pagination et de tri côté serveur.

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

Dans l'exemple ci-dessus, reportez-vous au bloc de code ci-dessous, qui effectue la pagination côté serveur,

gridApi.pagination.on.paginationChanged($scope, function (newPage, pageSize) {
    paginationOptions.pageNumber = newPage;
    paginationOptions.pageSize = pageSize;
    getPage();
});
29
guru

Il est facile de construire votre propre grille en utilisant uib-pagination et ng-repeat. Vous trouverez un exemple complet dans le lien suivant. J'espère que cela aiderait. 

Pagination WebAPI angulaire

0
LENG UNG