Paginación personalizada usando Angular JS: necesita mostrar elementos div en la primera página, que deberían repetirse en la segunda página, hacer clic en Siguiente

  1. Tengo un panel paginado. Tengo una matriz de tamaño 42. La primera página muestra 24 elementos div y la segunda página muestra los 18 elementos restantes.

  2. Mi pregunta es ¿cómo puedo mostrar los elementos 1 a 24 en la página 1 y los elementos 19 a 42 en la segunda página? Lo que significa que necesito una superposición de elementos en estas 2 páginas.

El código html implementado es el siguiente:

Item{{$index+1}}

Para lo anterior: pageSize = 24, currentPage = 0 (Cambiado a 1 cuando se hace clic en Siguiente)

El código JS para hacer lo mismo es el siguiente (seguido de este violín: http://jsfiddle.net/2ZzZB/56/ ):

  .filter('startFrom', function() { return function(input, start) { if (!input || !input.length) { return; } else{ start = +start; //parse to int return input.slice(start); } } }); 

Primeros 24 artículos Siguiente 18 artículos

Usando una función en el filtro startFrom: puede controlar la visualización de la última página en el conjunto de datos. Esto mantiene constante el tamaño de visualización de los resultados y le proporciona la superposición de los datos que necesita.

Fiddle actualizado: http://jsfiddle.net/zr9nd0rx/1/

 
  • $scope.startFromCalculator = function() { if ($scope.currentPage + 1 == Math.ceil($scope.data.length/$scope.pageSize)) { return $scope.data.length - $scope.pageSize; } else { return $scope.currentPage*$scope.pageSize; } }