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