Yayo Nuñez
Yayo Nuñez

Reputation: 1

pagination ng-repeat only show data in the first page

i'm trying to show a list with pagination in angularjs, but only show first page and the others are empty. Can you help me?

This is my code:

Controller.js:

angular.module('Client').controller('ListaInventarioCtrl',  function($scope, $location, $filter, InventarioResource){

    $scope.Inventarios = InventarioResource.query();  
    $scope.pageSize = 5;  
    $scope.currentPage = 0;

    $scope.getData = function () {
      return $filter('filter')($scope.Inventarios, $scope.search)
    }

    $scope.numberOfPages=function(){
        return Math.ceil($scope.getData().length/$scope.pageSize);                
    }
});

angular.module('Client')
.filter('startFrom', function() {  
    return function(input, start) {    
        start = +start;   
        return input.slice(start);    
    }   
});

listInventario.html:

<div class="input-field">
        <input placeholder="Search" type="text" ng-model="search">
</div>

<tr ng-repeat="Inventario in Inventarios | filter:search | limitTo:pageSize | startFrom:currentPage*pageSize">
        <td>{{ Inventario.id }}</td>
</tr>

<button ng-disabled="currentPage == 0" ng-click="currentPage=currentPage-1">
    Previous
  </button>
  {{currentPage+1}}/{{numberOfPages()}}
  <button ng-disabled="currentPage >= getData().length/pageSize - 1" ng- click="currentPage=currentPage+1">
    Next
 </button>

When i click Next button, the list in ng-repeat is empty

Upvotes: 0

Views: 1166

Answers (2)

Luis Angel Pena Zuniga
Luis Angel Pena Zuniga

Reputation: 190

I will complement the answers with: limitTo:pageSize track by $index"

<tr>      
    <td data-ng-repeat="Inventario in filteredData =
        (Inventarios| filter:search)
        | startFrom: currentPage * pageSize
        | limitTo:pageSize track by $index">

        <span>{{Inventario.id}}</span>
     </td>
 </tr>

Or in this answer that i found y the first option there ir a good example

Stackoverflow: enter link description here

Plunker: enter link description here

Get lucky :)

Upvotes: 0

Yayo Nu&#241;ez
Yayo Nu&#241;ez

Reputation: 1

I found the solution, you must first use "startFrom" and after "limitTo" in the ng-repeat.

This would be the solution:

<tr ng-repeat="Inventario in Inventarios | filter:search | startFrom:currentPage*pageSize | limitTo:pageSize">
        <td>{{ Inventario.id }}</td>
</tr> 

Upvotes: 0

Related Questions