Why is my angular paging not working?

Question

The paging worked when data was populated on load. After I included enteredValue/search functionality to populate ng-grid I no longer see 5 items per page and the next/previous buttons don't work. I believe the change of data in gridOptions from 'myData' to 'source' broke the pagination. I am trying to pass $scope.source into setPagingData function but having issues. How do I get the paging to work properly?

 $scope.setPagingData = function(data, page, pageSize) {
            var pagedData = data.slice((page - 1) * pageSize, page * pageSize);
            $scope.myData = pagedData;

            $scope.totalServerItems = data.length;
            if (!$scope.$$phase) {
              $scope.$apply();
            }
          };

 $scope.gridOptions = {
            data: 'source',
            enablePaging: true,
            pagingOptions: $scope.pagingOptions,
            showFooter: true
          };

Here's plunker

Well without proper code in plunker it would be hard to tackle this issue. However existing version has mixed up parameters. getPagedDataAsync receives array of objects into parameter url and it's expected that $http.get(url) fails... Also is there a reason to use so outdated angular version? I found it easier to debug in 1.2.1 — Kirill Slatin
Ok. I'll update my angular version, give gridOptions filtered data, and let you know if it works. Thanks. — Sunny

Kirill Slatin Kirill Slatin · Accepted Answer · 2015-07-04T15:28:03

Ok, let's assume we add such a piece of code to use mock data in controller.

          $scope.getPagedDataAsync = function(url, pageSize, page, searchText) {
            setTimeout(function() {
                var data;
                 /// this is new and required only for sake of plunker
                if(typeof url !== 'string'){
                  $scope.setPagingData(url, page, pageSize);
                }

Now it becomes clear that you messed up grid options and provided as source unfiltered data.

          $scope.gridOptions = {
            data: 'source',//should be myData
            enablePaging: true,
            pagingOptions: $scope.pagingOptions,
            showFooter: true
          };

Why is my angular paging not working?

1 Answers