Implementar el diseño de paginación de tablas en AngularJS
- Diseño de paginación de tablas en AngularJS
- Pasos para implementar el diseño de paginación de tablas en AngularJS
Este artículo presentará el diseño de paginación de tablas en AngularJS y lo guiará a través de los pasos para implementar esto en sus datos.
Diseño de paginación de tablas en AngularJS
La paginación de tablas es una característica esencial en AngularJS necesaria para cualquier aplicación que muestre una lista de datos, como un inventario o un catálogo de productos.
Permite a los usuarios desplazarse por grandes conjuntos de datos en una página en lugar de hacer clic en una página a la vez, proporcionando un diseño fácil de leer perfecto para dispositivos móviles.
La paginación de tablas le permite dividir una tabla larga en partes más pequeñas y manejables al dividir la tabla en secciones y paginarlas para que los lectores escaneen la información de manera eficiente.
Proporciona un conjunto de directivas para implementar y algunas funciones de utilidad y filtros para facilitar la tarea de configurar la tabla.
Principalmente, la función de paginación de la tabla se crea utilizando ng-repeat para generar una lista de datos, recorrer los datos y mostrarlos en la tabla. También tiene la directiva ng-click que activa un evento al hacer clic en cada fila.
Pasos para implementar el diseño de paginación de tablas en AngularJS
La paginación de tablas AngularJS es una excelente manera de paginar datos en una tabla horizontal o vertical. El caso de uso más común para la paginación de tablas de AngularJS es proporcionar una forma eficiente de ver y navegar por tablas de datos grandes.
Podemos usarlo tanto para datos estáticos como dinámicos. Y también le permite implementar la funcionalidad de clasificación, filtrado y búsqueda.
Hay cuatro pasos para implementar la paginación de tablas AngularJS:
- Cargue los datos en formato JSON y guárdelos en una variable llamada
data. - Cree un controlador y asigne la variable a una variable de alcance llamada
data. - Cree una fábrica AngularJS que generará enlaces de paginación, los agregará al alcance del controlador y los devolverá como un objeto de matrices de enlaces con números de página y recuento de páginas, respectivamente. La fábrica también definirá qué tipo de enlaces de paginación desea utilizar (tabla, árbol, lista) y cuántos elementos se muestran en una página (tamaño de página).
- Agregue un botón de paginación en la parte inferior de cada fila dentro de su tabla.
Analicemos un ejemplo para comprender mejor la paginación de tablas en AngularJS.
Código HTML:
<!DOCTYPE html>
<html>
<head>
<link data-require="bootstrap-css@*" data-semver="3.3.1" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" />
<script data-require="angular.js@*" data-semver="1.4.3" src="https://code.angularjs.org/1.4.3/angular.js"></script>
<script src="services.js"></script>
<script src="main.js"></script>
</head>
<body>
<div ng-app="paginationApp">
<div style="margin-left:5px;margin-top:10px" ng-controller="mainCtrl">
<pgn-table conf="config"></pgn-table>
</div>
</div>
</body>
</html>
Código JavaScript:
var myApp = angular.module('paginationApp');
myApp.controller('mainCtrl', function($scope,demo) {
demo.then(function(data){
$scope.config.myData=data;
});
$scope.config = {
heads: ['name', 'age']
};
});
myApp.directive('pgnTable', ['$compile',
function($compile) {
return {
restrict: 'E',
templateUrl: 'Sample.html',
replace: true,
scope: {
conf: "="
},
controller: function($scope) {
$scope.currentPage=1;
$scope.numLimit=6;
$scope.start = 0;
$scope.$watch('conf.myData',function(newVal){
if(newVal){
$scope.pages=Math.ceil($scope.conf.myData.length/$scope.numLimit);
}
});
$scope.hideNext=function(){
if(($scope.start+ $scope.numLimit) < $scope.conf.myData.length){
return false;
}
else
return true;
};
$scope.hidePrev=function(){
if($scope.start===0){
return true;
}
else
return false;
};
$scope.nextPage=function(){
console.log("next pages");
$scope.currentPage++;
$scope.start=$scope.start+ $scope.numLimit;
console.log( $scope.start)
};
$scope.PrevPage=function(){
if($scope.currentPage>1){
$scope.currentPage--;
}
console.log("next pages");
$scope.start=$scope.start - $scope.numLimit;
console.log( $scope.start)
};
},
compile: function(elem) {
return function(ielem, $scope) {
$compile(ielem)($scope);
};
}
};
}
]);
Después de eso, usamos la siguiente información aleatoria en las tablas.
{
"demo": [{
"name": "Adil",
"age": 21
}, {
"name": "Steve",
"age": 34
}, {
"name": "John",
"age": 23
}, {
"name": "Awaq",
"age": 22
}, {
"name": "Bernard",
"age": 26
}, {
"name": "Naiman",
"age": 23
}, {
"name": "Rotan",
"age": 45
}, {
"name": "David",
"age": 32
}, {
"name": "Jade",
"age": 32
}, {
"name": "Reven",
"age": 22
}, {
"name": "Philp",
"age": 28
}, {
"name": "Salt",
"age": 38
}]
}
Haga clic aquí para ver la demostración en vivo del código anterior.
Muhammad Adil is a seasoned programmer and writer who has experience in various fields. He has been programming for over 5 years and have always loved the thrill of solving complex problems. He has skilled in PHP, Python, C++, Java, JavaScript, Ruby on Rails, AngularJS, ReactJS, HTML5 and CSS3. He enjoys putting his experience and knowledge into words.
Facebook