angularjs - bootstrap - ¿Cómo hacer paginación del lado del cliente con ngGrid?

ng-grid angularjs

Question

Si establece las opciones de enablePaging de una ng-grid en true , habilita la paginación del lado del servidor.

¿Qué hay del lado del cliente? No pude encontrar ninguna pista sobre esto en la documentación, pero no me puedo imaginar que ng-grid tampoco admita paginación del lado del cliente.

¿Alguna pista?

Answer 1

Creo que el ejemplo dado en la página angular ( http://angular-ui.github.io/ng-grid/ ) en realidad muestra un ejemplo de paginación del lado del cliente. Si nos fijamos en la carga de datos que está siendo invocada por el script de ejemplo ( http://angular-ui.github.io/ng-grid/jsonFiles/largeLoad.json ), verá que en realidad no está haciendo ningún servidor -paginación lateral ... está bajando como un archivo grande.

Answer 2

¡Puede ser que te ayude!

La muestra de código AngularJs

var app = angular.module(''myApp'', [''ngGrid'']);
app.controller(''MyCtrl'', function($scope, $http) {
$scope.filterOptions = {
filterText: ""
};
$scope.pagingOptions = {
pageSizes: [25, 50, 100],
pageSize: 25,
totalServerItems: 0,
currentPage: 1
};
$scope.setPagingData = function(data, page, pageSize) {
var pagedData = data.slice((page - 1) * pageSize, page * pageSize);
$scope.myData = pagedData;
$scope.pagingOptions.totalServerItems = data.length;
if (!$scope.$$phase) {
$scope.$apply();
}
};
$scope.getPagedDataAsync = function(pageSize, page) {
setTimeout(function() {
$http.get(''json'').success(function(largeLoad) {
$scope.setPagingData(largeLoad, page, pageSize);
});
}, 100);
};
$scope.$watch(''pagingOptions'', function() {
$scope.getPagedDataAsync($scope.pagingOptions.pageSize, $scope.pagingOptions.currentPage, $scope.filterOptions.filterText);
}, true);
$scope.gridOptions = {
data: ''myData'',
enablePaging: true,
pagingOptions: $scope.pagingOptions,
showFooter: true
};
$scope.gridOptions.columnDefs = ''gridColumnDefs'';
// city loc pop state
$scope.gridColumnDefs = [{
field: "city"
},
{
field: "state"
}, {
field: "pop"
}, {
field: "loc"
}
];
});

El código HTML-muestra

 <div ng-app="myApp" ng-controller="MyCtrl">
<div class="gridStyle" ng-grid="gridOptions"></div>
</div>