2015-03-17 14 views
8

Sto utilizzando AngularJs Ui-Grid.info per visualizzare le griglie di dati dinamici, mi piace ma ora devo collegarlo a una tabella di database con 60.000 record utilizzando il filtro sul lato server e paging e sembra che le opzioni di impaginazione per questo plugin siano solo per il paging lato client.Come utilizzare la griglia UI angolare con paging lato server

Qualcuno è riuscito a farlo funzionare con paging lato server. Hai un esempio di codice.

Visualizza codice

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

parte del controller

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

risposta

24

C'è un'opzione di impaginazione lato server disponibile nelle API.

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

Ecco un esempio per l'impaginazione e l'ordinamento lato server.

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

Nel precedente esempio, fare riferimento al codice di blocco specificato di sotto del quale fa la paginazione lato server,

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

Grazie per la #guru Plunker, questo è esattamente quello che mi serviva –

+0

questo sarà un bene. Ora per integrarmi con una versione astratta e direttiva dell'esempio di scorrimento infinito di ui-griglia .... eck. – FlavorScape

+1

Perché il '/ 4' sembra strano? Ho copiato quello che hai fatto qui sul mio sito, e sembra ugualmente strano. Come posso risolvere questo? –

-1

E 'facile costruire il proprio griglia utilizzando UIB-impaginazione e ng-repeat. C'è un esempio completato nel seguente link. Spero che questo sarebbe di aiuto.

Angular WebAPI Pagination

Problemi correlati