AngularJs – Simple ordenamiento de tabla con buscador


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 :

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.

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:

Para probar puedes agregar este código completo y guardarlo como un archivo .html:

O ver una vista previa en este jsfiddle:

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *