ng-Grid Pagination not working - AngularJS

Question

HTML:

<div class="grid-style" data-ng-grid="groupGrid">
     </div>

Javascript:

appRoot.controller('GroupController', function ($scope, $location, $resource, $http) {

var groupResource = $resource('/api/group', {}, { update: { method: 'PUT' }, add: {      method: 'POST'} });
$scope.groupList = [];    

groupResource.query(function (data) {
    $scope.groupList.length = 0;
    angular.forEach(data, function (groupData) {
        $scope.groupList.push(groupData);
    });
});

$scope.totalServerItems = 0;

$scope.pagingOptions = {
    pageSizes: [4, 8, 12, 16],
    pageSize: 250,
    currentPage: 1
};
$scope.setPagingData = function (data, page, pageSize) {
    var pagedData = data.slice((page - 1) * pageSize, page * pageSize);
    $scope.groupList = pagedData;
    $scope.totalServerItems = data.length;
    $scope.currentPage = page;
    if (!$scope.$$phase) {
        $scope.$apply();
    }
};

$scope.getPagedDataAsync = function (pageSize, page, searchText) {
    setTimeout(function () {
        var data;
        if (searchText) {
            var ft = searchText.toLowerCase();
            $http.get('/api/group').success(function (largeLoad) {
                data = largeLoad.filter(function (item) {
                    return JSON.stringify(item).toLowerCase().indexOf(ft) != -1;
                });
                $scope.setPagingData(data, page, pageSize);
            });
        } else {
            $http.get('/api/group').success(function (largeLoad) {
                $scope.setPagingData(largeLoad, page, pageSize);
            });
        }
    }, 100);
};

$scope.getPagedDataAsync($scope.pagingOptions.pageSize,     $scope.pagingOptions.currentPage);

$scope.$watch('pagingOptions', function (newVal, oldVal) {
    if (newVal !== oldVal && newVal.currentPage !== oldVal.currentPage) {
        $scope.getPagedDataAsync($scope.pagingOptions.pageSize, $scope.pagingOptions.currentPage);
    }
}, true);

$scope.selectedGroups = [];

$scope.groupGrid = {
    data: 'groupList',
    multiSelect: false,
    selectedItems: $scope.selectedGroups,
    enableColumnResize: false,                        
    enablePaging: true,
    showFooter: true,
    totalServerItems: 'totalServerItems',
    pagingOptions: $scope.pagingOptions,
    columnDefs: [
        { field: 'groupName', displayName: 'Group Name', width: '25%' }
    ],
};
});

My problem - Pagination is not working, as in - The current page number is not displayed. - When I change the page size (like say 4), the number of items in the grid doesn't change (remains 16 - total no. of items I actually have). - The number of items change in the grid only after clicking the next page button twice.

Eugen Breaur · Accepted Answer · 2013-11-25 09:52:01Z

1

Is your 'pagingOptions.currentPage' input max-invalid?

https://github.com/angular-ui/ng-grid/issues/598

You just had to update ng-grid to the latest stuff

edited Nov 25, 2013 at 9:52

answered Nov 25, 2013 at 9:31

Eugen Breaur

415 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

kelsier Over a year ago

I don't know, I deleted those pages. I moved on from ng-Grid, an ex-colleague suggested me ng-Table. Thanks anyways.

kelsier · Accepted Answer · 2013-12-17 04:59:29Z

0

I've searched for quite a while to do some pagination in ng-grid, but I never got what I wanted. And then I bumped into ng-table.

It seems to have what I want, so I suggest that as an alternative for ng-grid.

answered Dec 17, 2013 at 4:59

kelsier

4,1085 gold badges37 silver badges52 bronze badges

Comments

Ajay Kumar Ganesh · Accepted Answer · 2015-04-24 07:57:08Z

0

To get the current page in ng-grid, pass exact int value to the cuurent page variable, for that I changed in my code as follows.

$scope.pagingOptions = {
    pageSizes: [4, 8, 12, 16],
    pageSize: 250,
    currentPage: parseInt(pageId,10);
};

pageId = 1 or 2 or 3 etc.. as your wish.

edited Apr 24, 2015 at 7:57

Ajay Kumar Ganesh

1,8522 gold badges26 silver badges35 bronze badges

answered Apr 24, 2015 at 6:55

user1954367

1

Comments

user3843934 · Accepted Answer · 2015-08-05 06:37:22Z

0

Add below code in your js file.

var pageop=false;
        $scope.$watch('pagingOptions.pageSize', function (newVal, oldVal) {
            if(pageop){
  $scope.getPagedDataAsync($scope.pagingOptions.pageSize,$scope.pagingOptions.currentPage);                 

            }else{
                 pageop=true;
             }

        }, true);

answered Aug 5, 2015 at 6:37

user3843934

Collectives™ on Stack Overflow

ng-Grid Pagination not working - AngularJS

4 Answers 4

1 Comment

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related