La paginación es una técnica de dividir el contenido de una página grande en particular en páginas pequeñas y mostrarlas en un formato indexado en orden. Esta técnica es muy popular en el diseño de motores de búsqueda en los que los contenidos más identificables se presentan de forma prioritaria. Además, muchos desarrolladores de Angular utilizan la técnica de paginación junto con el uso de Bootstrap para desarrollar páginas web dinámicas.
Ejemplo:
en el siguiente ejemplo, se implementa la técnica de paginación, que también se denomina técnica de paginación en AngularJS. El código HTML debe agregarse al archivo index.html y el código javascript debe agregarse al archivo script.js. En el ejemplo que se menciona a continuación, creamos una tabla y le pusimos datos usando javascript y representamos toda la implementación usando paginación.
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<script data-require="angular.js@1.1.5"
data-semver="1.1.5"
src=
"http://code.angularjs.org/1.1.5/angular.min.js">
</script>
<link data-require="bootstrap-css@2.3.2"
data-semver="2.3.2"
rel="stylesheet"
href=
"//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css" />
<script data-require="angular-ui-bootstrap@0.3.0"
data-semver="0.3.0"
src=
"http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.3.0.min.js">
</script>
<link rel="stylesheet"
href="style.css" />
<script src="script.js"></script>
<script src="app.js"></script>
</head>
<h1 style="color: green;" ;>GeeksforGeeks</h1>
<body ng-controller="ListController as list">
<table border="1">
<thead>
<tr>
<th>COURSE CODE</th>
<th>COURSE NAME</th>
<th>COURSE DESCRIPTION</th>
<th>NO. OF CHAPTERS</th>
<th>AVAILABILITY</th>
<th>TOTAL MARKS</th>
<th>PASS MARKS</th>
<th>STATE OF COURSE</th>
</tr>
</thead>
<tr ng-repeat="item in filteredItems">
<td>{{item.courseCode}}</td>
<td>{{item.courseName}}</td>
<td>{{item.courseDescription}}</td>
<td>{{item.noc}}</td>
<td>{{item.available}}</td>
<td>{{item.totm}}</td>
<td>{{item.passm}}</td>
<td>{{item.soc}}</td>
</tr>
</table>
<div data-pagination=""
data-num-pages="numOfPages()"
data-current-page="curPage"
data-max-size="maxSize"
data-boundary-links="true">
</div>
</body>
</html>
// Write Javascript code here
var app = angular.module('myApp', ['ui.bootstrap']);
app.controller('ListController', function($scope){
$scope.curPage = 1,
$scope.itemsPerPage = 3,
$scope.maxSize = 5;
this.items = itemsDetails;
$scope.numOfPages = function () {
return Math.ceil(itemsDetails.length / $scope.itemsPerPage);
};
$scope.$watch('curPage + numPerPage', function() {
var begin = (($scope.curPage - 1) * $scope.itemsPerPage),
end = begin + $scope.itemsPerPage;
$scope.filteredItems = itemsDetails.slice(begin, end);
});
});
var itemsDetails = [
{ courseCode : 1001,
courseName : 'Web Technology',
courseDescription : 'HTML, CSS, AngularJS',
noc : '10',
available : 'YES',
totm : 200,
passm : 75,
soc : 'Active'
},
{ courseCode : 1002,
courseName : 'Software Technology',
courseDescription :
'Alpha testing, Beta testing,
Integration testing, Black box testing',
noc : '10',
available : 'YES',
totm : 100,
passm : 45,
soc : 'Active'
},
{ courseCode : 1003,
courseName : 'Theory Of Computation',
courseDescription : 'FSM, PDA, TM',
noc : '100',
available : 'NO',
totm : 100,
passm : 45,
soc : 'Inactive'
},
{ courseCode : 1004,
courseName : 'Algorithm',
courseDescription :
'Greedy algorithms, Dynamic Programming, Sorting',
noc : '6',
available : 'YES',
totm : 200,
passm : 75,
soc : 'Active'
},
{ courseCode : 1005,
courseName : 'Networking',
courseDescription : 'IP',
noc : '12',
available : 'YES',
totm : 50,
passm : 19,
soc : 'Active'
},
{courseCode : 1006,
courseName : 'Database',
courseDescription : 'Indexing, B and B+ trees, SQL',
noc : '24',
available : 'NO',
totm : 200,
passm : 75,
soc : 'Inactive'
},
{ courseCode : 1007,
courseName : 'Programming',
courseDescription : 'C, C++, JAVA, Python',
noc : '30',
available : 'YES',
totm : 200,
passm : 75,
soc : 'Active'
},
{ courseCode : 1008,
courseName : 'Data structure',
courseDescription : 'Tree, Graph',
noc : '10',
available : 'NO',
totm : 100,
passm : 45,
soc : 'Inactive'
},
{ courseCode : 1009,
courseName : 'Operating Systems',
courseDescription :
'CPU Scheduling, Memory Managment, Disk Management',
noc : '21',
available : 'YES',
totm : 200,
passm : 75,
soc : 'Active'
},
{ courseCode : 1010,
courseName : 'Compiler',
courseDescription : 'Top down parsing, Bottom up Parsing',
noc : '15',
available : 'YES',
totm : 200,
passm : 75,
soc : 'Active'
}
];
Salida:
Primera página- 
Última página-
Explicación:
La página web muestra todos los detalles de los cursos disponibles en forma tabular. La técnica utilizada aquí es la paginación. Esto permite que solo se reproduzcan tres filas en una sola página web y en la última página solo se muestra una fila.
Se han creado cuatro páginas. Para mostrar la barra de paginación, hemos usado ui.bootstrap como una dependencia de la aplicación AngularJS. El «curPage» se inicializa con un valor 1, lo que significa que cada vez que se carga la página web, se mostrará la primera página como una página actual. El número de elementos por página se especifica utilizando la variable «elementos por página» y se le asigna un valor de 3, ya que queremos mostrar 3 elementos en una página como máximo.
La variable «maxSize» indica el número máximo de páginas permitidas en un sistema de paginación. La línea“this.items = itemsDetails;” inicia la variable itemDetails. Hemos creado una función para calcular el número de páginas y luego almacenamos el valor en la variable de alcance denominada «numOfPages».
Hemos ingresado los detalles de 10 cursos y calculando el número de páginas por la función ceil mencionada anteriormente nos dio 4 páginas en total. Tenemos 10 elementos en la array «itemsDetails», esto significa que la indexación de la array oscilará entre 0 y 9. Para la primera página, el valor de «curPage» será 0. Esto hará que el valor de comience como 0. nos ayudará a obtener el primer valor de índice de la array. El valor de la variable ‘fin’ será 0 + 3 = 3. Al usar el método slice(), mostramos 3 filas que son los números de elemento 0, 1 y 2. De manera similar, en la segunda, tercera y cuarta páginas, el se muestran el resto de los elementos. Así es como funciona la paginación en AngularJS.
Publicación traducida automáticamente
Artículo escrito por sahelibhattacharjee1 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA