1

Tengo una lista de registros que muestro con ng-repeat que estoy ordenando por phone y la estoy paginando.

<li ng-repeat="todo in filteredTodos | orderBy:'phone':true">{{todo.phone}}</li>

Necesito ordenar y paginar la lista, pero al adicionar el orderBy:'phone':true solo se ordena los registros de cada pagina en vez de ordenar la lista completa, tengo claro que es por la lógica del paginador, pero no encuentro una lógica que me permita paginar y ordenar toda la lista completa. aqui el ejemplo:

var app = angular.module('todos',['ui.bootstrap']);
app.controller('TodoController', function($scope) {
      $scope.filteredTodos = []
  ,$scope.currentPage = 1
  ,$scope.numPerPage = 5
  ,$scope.maxSize = 5;
  
  $scope.makeTodos = function() {
    $scope.todos = [];
    for (i=1;i<=20;i++)
    $scope.todos=[
    
       {'phone': 'Nexus S'},
       {'phone': 'Motorola XOOM™ with Wi-Fi'},
       {'phone': 'MOTOROLA XOOM™'},
       {'phone': 'Nexus S'},
       {'phone': 'Motorola XOOM™ with Wi-Fi'},
       {'phone': 'eeeeee XOOM™'},
       {'phone': 'Nexus S'},
       {'phone': 'Motorola XOOM™ with Wi-Fi'},
       {'phone': 'MOTOROLA XOOM™'},
       {'phone': 'Nexus S'},
       {'phone': 'ffffff XOOM™ with Wi-Fi'},
       {'phone': 'MOTOROLA XOOM™'},
       {'phone': 'Nexus S'},
       {'phone': 'Motorola XOOM™ with Wi-Fi'},
       {'phone': 'MOTOROLA XOOM™'},
       {'phone': 'Nexus S'},
       {'phone': 'Motorola XOOM™ with Wi-Fi'},
       {'phone': 'MOTOROLA XOOM™'}
    ];
  };
  $scope.makeTodos(); 
  
  $scope.numPages = function () {
    return Math.ceil($scope.todos.length / $scope.numPerPage);
  };
  
  $scope.$watch('currentPage + numPerPage', function() {
    var begin = (($scope.currentPage - 1) * $scope.numPerPage)
    , end = begin + $scope.numPerPage;
    
    $scope.filteredTodos = $scope.todos.slice(begin, end);
  });
   
   
});
   <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular.min.js"></script>
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular-animate.min.js"></script>
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular-touch.min.js"></script>
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular-sanitize.js"></script>
    <script src="https://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-2.5.0.min.js"></script>
<body ng-app="todos" ng-controller="TodoController">
    <h1>Todos</h1>
    <h4>{{todos.length}} remain</h4>
    <ul>
      <li ng-repeat="todo in filteredTodos | orderBy:'phone':true">{{todo.phone}}</li>
    </ul>
    <div data-pagination="" data-num-pages="numPages()" 
      data-current-page="currentPage" data-max-size="maxSize"  
      data-boundary-links="true"></div>
  </body>

Aqui el codigo de ejemplo similar del paginador que tengo.

Mi lista tiene varias columnas y se obtiene consumiendo un servicio el cual no puedo modificar, lo que tengo en mente es que se debe modificar la lógica de paginar la lista y hay mismo aplicar el orden.

6
  • lo que quieres decir que tienes un arreglo de n elementos y al realizar el order por el paginado solo ordena lo que se visualiza en el html? Commented el 6 jul. 2017 a las 14:05
  • Si, solo se ordena los 10 primeros registros en vez de ordenar todos los registros completamente. Commented el 6 jul. 2017 a las 14:09
  • y donde haces el paginado?, lo haces antes de ordenar? Commented el 6 jul. 2017 a las 14:10
  • El paginado lo hago en el controllador, el cual es similar al la lógica que esta en este ejemplo en las ultimas lineas del archivo scripts.js. Commented el 6 jul. 2017 a las 14:24
  • por favor revisa el enlace Commented el 6 jul. 2017 a las 14:26

1 respuesta 1

1

tu error es que estas haciendo el corte del array y luego paginarlo la solucion es ordenarlo primero y luego cortar el array.debes agregar la linea luego de cargar el Array

$scope.todos=  $filter('orderBy')($scope.todos, 'phone', false);

si quieres ordenarlo descentendte solo cambia el true por el false

 $scope.todos=  $filter('orderBy')($scope.todos, 'phone', true);

y quitar el filtro ya que lo estar ordenando previamente

<li ng-repeat="todo in filteredTodos">

el ejemplo completo a continuacion:

var app = angular.module('todos',['ui.bootstrap']);
app.controller('TodoController', function($scope,$filter) {
      $scope.filteredTodos = []
 ,$scope.currentPage = 1
  ,$scope.numPerPage = 5
  ,$scope.maxSize = 5;
  
  $scope.makeTodos = function() {
    $scope.todos = [];
    for (i=1;i<=20;i++)
    $scope.temp=[
    
       {'phone': 'Nexus S'},
       {'phone': 'Motorola XOOM™ with Wi-Fi'},
       {'phone': 'MOTOROLA XOOM™'},
       {'phone': 'Nexus S'},
       {'phone': 'Motorola XOOM™ with Wi-Fi'},
       {'phone': 'eeeeee XOOM™'},
       {'phone': 'Nexus S'},
       {'phone': 'Motorola XOOM™ with Wi-Fi'},
       {'phone': 'MOTOROLA XOOM™'},
       {'phone': 'Nexus S'},
       {'phone': 'ffffff XOOM™ with Wi-Fi'},
       {'phone': 'MOTOROLA XOOM™'},
       {'phone': 'Nexus S'},
       {'phone': 'Motorola XOOM™ with Wi-Fi'},
       {'phone': 'MOTOROLA XOOM™'},
       {'phone': 'Nexus S'},
       {'phone': 'Motorola XOOM™ with Wi-Fi'},
       {'phone': 'AMOTOROLA XOOM™'}
    ];
$scope.todos=  $filter('orderBy')($scope.temp, 'phone', false);
  };
  $scope.makeTodos(); 
  
  $scope.numPages = function () {
    return Math.ceil($scope.todos.length / $scope.numPerPage);
  };
  
  $scope.$watch('currentPage + numPerPage', function() {
    var begin = (($scope.currentPage - 1) * $scope.numPerPage)
    , end = begin + $scope.numPerPage;
    
    $scope.filteredTodos = $scope.todos.slice(begin, end);
  });
   
   
});
   <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular.min.js"></script>
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular-animate.min.js"></script>
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular-touch.min.js"></script>
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular-sanitize.js"></script>
    <script src="https://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-2.5.0.min.js"></script>
<body ng-app="todos" ng-controller="TodoController">
    <h1>Todos</h1>
    <h4>{{todos.length}} remain</h4>
    <ul>
      <li ng-repeat="todo in filteredTodos ">{{todo.phone}}</li>
    </ul>
    <div data-pagination="" data-num-pages="numPages()" 
      data-current-page="currentPage" data-max-size="maxSize"  
      data-boundary-links="true"></div>
  </body>

En conclusion Debes primero ORDENAR y luego PAGINAR

1
  • 1
    Gracias JackNavaRow :D Commented el 7 jul. 2017 a las 13:26

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.