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.\u00a0Adicional se agreg\u00f3 un filtro de b\u00fasqueda para poder encontrar alg\u00fan registro f\u00e1cilmente.<\/p>\n
Suponiendo que tenemos un array de listado de clientes :<\/p>\n
angular.module('miApp', [])\r\n.controller('mainController', function($scope) {\r\n $scope.sortType = 'nombre';\r\n $scope.sortReverse = false;\r\n $scope.buscar = '';\r\n \r\n $scope.clientes = [\r\n { id: 1, nombre: 'Gr\u00e9gor', apellido: 'Goz\u00e1lez', fecha: '22\/05\/2019' },\r\n { id: 2, nombre: 'Maria', apellido: 'Sulbaran', fecha: '20\/05\/2019' },\r\n { id: 3, nombre: 'Juan', apellido: 'Cede\u00f1o', fecha: '30\/05\/2019' },\r\n { id: 4, nombre: 'Carlos', apellido: 'Perez', fecha: '31\/05\/2019' }\r\n ]; \r\n});<\/pre>\nAngular nos provee de directivas, filtros y al momento de mostrar la informaci\u00f3n con la directiva ng-repeat, pasamos los par\u00e1metros necesarios para indicar el ordenamiento con \u00aborderBy\u00bb, la columna por la cual ordenar \u00absortType\u00bb y el tipo de ordenamiento, si ser\u00e1 al rev\u00e9s \u00absortType\u00bb. Adicional se utiliza el filtro de busqueda \u00abfilter\u00bb\u00a0 y la variable para usar de criterio.<\/p>\n
<tr ng-repeat=\"cliente in clientes | orderBy:sortType:sortReverse | filter:buscar\">\r\n <td>{{ cliente.id }}<\/td>\r\n <td>{{ cliente.nombre }}<\/td>\r\n <td>{{ cliente.apellido }}<\/td>\r\n <td>{{ cliente.fecha }}<\/td>\r\n<\/tr><\/pre>\nEn el header de la tabla, incluimos una funci\u00f3n 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:<\/p>\n
<thead>\r\n <tr>\r\n <td>\r\n <a href=\"#\" ng-click=\"sortType = 'id'; sortReverse = !sortReverse\">\r\n Id \r\n <span ng-class=\"sortType == 'id' && !sortReverse ? 'arrow arrow-down' : sortType == 'id' && sortReverse ? 'arrow arrow-up': ''\"><\/span>\r\n <\/a>\r\n <\/td>\r\n <\/tr>\r\n<\/thead>\r\n<\/pre>\nPara probar puedes agregar este c\u00f3digo completo y guardarlo como un archivo .html:<\/p>\n
<style>\r\n.arrow {\r\n border: solid black;\r\n border-width: 0 2px 2px 0;\r\n display: inline-block;\r\n padding: 3px;\r\n}\r\n\r\n.arrow-up {\r\n transform: rotate(-135deg);\r\n -webkit-transform: rotate(-135deg);\r\n}\r\n\r\n.arrow-down {\r\n transform: rotate(45deg);\r\n -webkit-transform: rotate(45deg);\r\n}\r\n<\/style>\r\n\r\n<div class=\"container\" ng-app=\"miApp\" ng-controller=\"mainController\">\r\n \r\n <div class=\"alert alert-info\">\r\n <p>Ordenado Por: {{ sortType }}<\/p>\r\n <p>Ordenado Reversa: {{ sortReverse }}<\/p>\r\n <p>Buscando por: {{ buscar }}<\/p>\r\n <\/div>\r\n \r\n <form>\r\n\t<input type=\"text\" class=\"form-control\" placeholder=\"Busqueda\" ng-model=\"buscar\">\r\n <\/form>\r\n \r\n <table class=\"table table-bordered table-striped\">\r\n \r\n <thead>\r\n <tr>\r\n <td>\r\n <a href=\"#\" ng-click=\"sortType = 'id'; sortReverse = !sortReverse\">\r\n Id \r\n <span ng-class=\"sortType == 'id' && !sortReverse ? 'arrow arrow-down' : sortType == 'id' && sortReverse ? 'arrow arrow-up': ''\"><\/span>\r\n <\/a>\r\n <\/td>\r\n <td>\r\n <a href=\"#\" ng-click=\"sortType = 'nombre'; sortReverse = !sortReverse\">\r\n Nombre\r\n <span ng-class=\"sortType == 'nombre' && !sortReverse ? 'arrow arrow-down' : sortType == 'nombre' && sortReverse ? 'arrow arrow-up': ''\"><\/span>\r\n <\/a>\r\n <\/td>\r\n <td>\r\n <a href=\"#\" ng-click=\"sortType = 'apellido'; sortReverse = !sortReverse\">\r\n Apellido \r\n <span ng-class=\"sortType == 'apellido' && !sortReverse ? 'arrow arrow-down' : sortType == 'apellido' && sortReverse ? 'arrow arrow-up': ''\"><\/span>\r\n <\/a>\r\n <\/td>\r\n <td>\r\n <a href=\"#\" ng-click=\"sortType = 'fecha'; sortReverse = !sortReverse\">\r\n Fecha\r\n <span ng-class=\"sortType == 'fecha' && !sortReverse ? 'arrow arrow-down' : sortType == 'fecha' && sortReverse ? 'arrow arrow-up': ''\"><\/span>\r\n <\/a>\r\n <\/td>\r\n <\/tr>\r\n <\/thead>\r\n \r\n <tbody>\r\n <tr ng-repeat=\"cliente in clientes | orderBy:sortType:sortReverse | filter:buscar\">\r\n\t<td>{{ cliente.id }}<\/td>\r\n <td>{{ cliente.nombre }}<\/td>\r\n <td>{{ cliente.apellido }}<\/td>\r\n <td>{{ cliente.fecha }}<\/td>\r\n <\/tr>\r\n <\/tbody>\r\n \r\n <\/table> \r\n<\/div>\r\n\r\n\r\n<script src=\"https:\/\/ajax.googleapis.com\/ajax\/libs\/angularjs\/1.7.8\/angular.min.js\"><\/script>\r\n\r\n<script>\r\nangular.module('miApp', [])\r\n.controller('mainController', function($scope) {\r\n $scope.sortType = 'nombre';\r\n $scope.sortReverse = false;\r\n $scope.buscar = '';\r\n \r\n $scope.clientes = [\r\n { id: 1, nombre: 'Gr\u00e9gor', apellido: 'Goz\u00e1lez', fecha: '22\/05\/2019' },\r\n { id: 2, nombre: 'Maria', apellido: 'Sulbaran', fecha: '20\/05\/2019' },\r\n { id: 3, nombre: 'Juan', apellido: 'Cede\u00f1o', fecha: '30\/05\/2019' },\r\n { id: 4, nombre: 'Carlos', apellido: 'Perez', fecha: '31\/05\/2019' }\r\n ];\r\n \r\n});\r\n<\/script><\/pre>\nO ver una vista previa en este jsfiddle:<\/p>\n