Aunque prefiero utilizar plugins, herramientas o fabricar mis propios buscadores, paginadores y ordenamientos, a veces solo necesitamos con cumplir con un requerimiento sencillo. En este caso necesitaba ordenar una simple tabla con pocos datos y permitir que el usuario eligiera por cual columna ordenar. Adicional se agregó un filtro de búsqueda para poder encontrar algún registro fácilmente.
Suponiendo que tenemos un array de listado de clientes :
1 2 3 4 5 6 7 8 9 10 11 12 13 |
angular.module('miApp', []) .controller('mainController', function($scope) { $scope.sortType = 'nombre'; $scope.sortReverse = false; $scope.buscar = ''; $scope.clientes = [ { id: 1, nombre: 'Grégor', apellido: 'Gozález', fecha: '22/05/2019' }, { id: 2, nombre: 'Maria', apellido: 'Sulbaran', fecha: '20/05/2019' }, { id: 3, nombre: 'Juan', apellido: 'Cedeño', fecha: '30/05/2019' }, { id: 4, nombre: 'Carlos', apellido: 'Perez', fecha: '31/05/2019' } ]; }); |
Angular nos provee de directivas, filtros y al momento de mostrar la información con la directiva ng-repeat, pasamos los parámetros necesarios para indicar el ordenamiento con «orderBy», la columna por la cual ordenar «sortType» y el tipo de ordenamiento, si será al revés «sortType». Adicional se utiliza el filtro de busqueda «filter» y la variable para usar de criterio.
1 2 3 4 5 6 |
<tr ng-repeat="cliente in clientes | orderBy:sortType:sortReverse | filter:buscar"> <td>{{ cliente.id }}</td> <td>{{ cliente.nombre }}</td> <td>{{ cliente.apellido }}</td> <td>{{ cliente.fecha }}</td> </tr> |
En el header de la tabla, incluimos una función para el momento de hacer click, ordenamos por dicha columna y para mostrar una fecha que indica el tipo de ordenamiento, usamos una clase con ng-class y estableciendola con if ternarios:
1 2 3 4 5 6 7 8 9 10 |
<thead> <tr> <td> <a href="#" ng-click="sortType = 'id'; sortReverse = !sortReverse"> Id <span ng-class="sortType == 'id' && !sortReverse ? 'arrow arrow-down' : sortType == 'id' && sortReverse ? 'arrow arrow-up': ''"></span> </a> </td> </tr> </thead> |
Para probar puedes agregar este código completo y guardarlo como un archivo .html:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 |
<style> .arrow { border: solid black; border-width: 0 2px 2px 0; display: inline-block; padding: 3px; } .arrow-up { transform: rotate(-135deg); -webkit-transform: rotate(-135deg); } .arrow-down { transform: rotate(45deg); -webkit-transform: rotate(45deg); } </style> <div class="container" ng-app="miApp" ng-controller="mainController"> <div class="alert alert-info"> <p>Ordenado Por: {{ sortType }}</p> <p>Ordenado Reversa: {{ sortReverse }}</p> <p>Buscando por: {{ buscar }}</p> </div> <form> <input type="text" class="form-control" placeholder="Busqueda" ng-model="buscar"> </form> <table class="table table-bordered table-striped"> <thead> <tr> <td> <a href="#" ng-click="sortType = 'id'; sortReverse = !sortReverse"> Id <span ng-class="sortType == 'id' && !sortReverse ? 'arrow arrow-down' : sortType == 'id' && sortReverse ? 'arrow arrow-up': ''"></span> </a> </td> <td> <a href="#" ng-click="sortType = 'nombre'; sortReverse = !sortReverse"> Nombre <span ng-class="sortType == 'nombre' && !sortReverse ? 'arrow arrow-down' : sortType == 'nombre' && sortReverse ? 'arrow arrow-up': ''"></span> </a> </td> <td> <a href="#" ng-click="sortType = 'apellido'; sortReverse = !sortReverse"> Apellido <span ng-class="sortType == 'apellido' && !sortReverse ? 'arrow arrow-down' : sortType == 'apellido' && sortReverse ? 'arrow arrow-up': ''"></span> </a> </td> <td> <a href="#" ng-click="sortType = 'fecha'; sortReverse = !sortReverse"> Fecha <span ng-class="sortType == 'fecha' && !sortReverse ? 'arrow arrow-down' : sortType == 'fecha' && sortReverse ? 'arrow arrow-up': ''"></span> </a> </td> </tr> </thead> <tbody> <tr ng-repeat="cliente in clientes | orderBy:sortType:sortReverse | filter:buscar"> <td>{{ cliente.id }}</td> <td>{{ cliente.nombre }}</td> <td>{{ cliente.apellido }}</td> <td>{{ cliente.fecha }}</td> </tr> </tbody> </table> </div> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.7.8/angular.min.js"></script> <script> angular.module('miApp', []) .controller('mainController', function($scope) { $scope.sortType = 'nombre'; $scope.sortReverse = false; $scope.buscar = ''; $scope.clientes = [ { id: 1, nombre: 'Grégor', apellido: 'Gozález', fecha: '22/05/2019' }, { id: 2, nombre: 'Maria', apellido: 'Sulbaran', fecha: '20/05/2019' }, { id: 3, nombre: 'Juan', apellido: 'Cedeño', fecha: '30/05/2019' }, { id: 4, nombre: 'Carlos', apellido: 'Perez', fecha: '31/05/2019' } ]; }); </script> |
O ver una vista previa en este jsfiddle: