Cuando estamos creando un programa dinámico e interactivo, puede ser que necesitemos agregar interacción. Por ejemplo, cuando un usuario hace clic en un botón para filtrar una lista larga de elementos.
También puede ser que necesitemos manipular una gran cantidad de información para poder mostrar solo aquellos elementos que coinciden con lo especificado por el usuario.
Una opción es programar cada consulta o busqueda y otra es utilizar un plugin para gestionar la tabla.
En este artículo aprenderás a filtrar una tabla HTML en JavaScript sin tener que recargar la página, y también conocerás el método filter(), una herramienta esencial para seleccionar elementos de arrays y trabajar con datos de forma clara e inmutable.
Qué significa filtrar datos en JavaScript
El filtro JavaScript es un método de matriz que devuelve una nueva matriz que contiene elementos de la matriz original que cumplen una condición determinada definida por una función de devolución de llamada.
En esencia, el filtro ofrece a los desarrolladores una forma limpia de producir un subconjunto de una matriz basándose en los criterios que defina.
Una de las tareas típicas de los lenguajes de programación es el filtrado de elementos de una estructura de datos, típicamente de arrays.
Por supuesto, podríamos realizar el filtrado de elementos de un array con nuestro propio algoritmo, realizando un sencillo bucle para recorrer todos los elementos del array y colocando en un array cada uno de los que nos queremos guardar.
Pero como el código se volvía demasiado largo y difícil de entender, esto condujo a la creación de muchos métodos individuales de JavaScript como el método filter() (sobre el cual aprenderás más adelante).
El método filter() de los arrays en Javascript nos permite mejorar esta situación de una manera muy elegante, gracias a un estilo más declarativo y funcional.
Cómo filtrar una tabla HTML sin recargar la página
Mucha veces nos pasa, que tenemos una tabla muy grande en HTML y nos piden que se pueda filtrar de alguna forma sin tener que recargar la página cada vez que quieran filtrar, conozco a muchas personas que para eso utilizan varias librerias y componentes externos, que se tienen que descargar, probar y modificar parte del código HTML para adaptar a dichas librerias
Hoy os traigo un forma muy sencilla de hacer un filtrado en la tabla sin tener que recargar, os explico como y luego os pongo el código.
Elementos necesarios
Para realizar esto, vamos a necesitar (aparte de una tabla en HTML) un campo de texto (input text), el cual usaremos para que el usuario vaya tecleando y nada más se suelte la letra (se puede cambiar por un button o similar), se vaya filtrando la tabla.
Para empezar necesitamos un campo de texto donde el usuario buscará lo que necesita de la tabla.
Una de las tareas típicas de los lenguajes de programación es el filtrado de elementos de una estructura de datos, típicamente de arrays.
Funcionamiento del filtrado
El procedimiento que seguiremos es que cada vez que el usuario deje de presionar la tecla en el campo del texto, mediante Javascript vamos a recorrer el tbody de la tabla (ya que no queremos que desaparezca ni la cabecera ni el footer (thead y tfoot)) y aplicaremos un estilo css para indicar si queremos que se visualize esta fila o no.
Por defecto pondremos que no se visualice y si en caso el texto de la celda tiene parte de lo escrito por el usuario, entonces lo visualizaremos.
texto = td[j].innerText; //Guardamos el valor que tiene la celda (td) en la variable texto.
tr[i].style.display = visible ?
Este enfoque permite que la búsqueda se ejecute directamente en el navegador y que las filas se oculten o se muestren sin solicitar nuevamente la página al servidor.
Uso del método filter()
Si bien esto funciona bastante bien, una mejor manera de filtrar un arreglo es usando el método filter() de ES6.
La función filter permite filtrar los elementos de un array y generar uno nuevo con todos los elementos que cumplen una determinada condición.
El método filter() de los arrays en Javascript nos permite mejorar esta situación de una manera muy elegante, gracias a un estilo más declarativo y funcional.
Sin lugar a duda, filter es una de las funciones más importantes a la hora de trabajar con arreglos, pues permite filtrar fácil y rápido los elementos de un array sin afectar el array original, respetando la inmutabilidad del array original.
La función filter está definida en Array.prototype, lo que hace que todos los arrays cuente con esta función por default.
En filtro forma parte del conjunto de herramientas estándar de JavaScript para matrices y se define en Array.prototypelo que significa que está disponible en todos los navegadores modernos y entornos Node.js.
Sintaxis del método filter()
El método filter() es un método ES6 con un sintaxis más prolija para filtrar un arreglo.
En la función callback, hay que acceder a cada elemento, el índice y hasta el arreglo original:
myArray.filter((element, index, array) => { /* ...
Para cada elemento del array se invocará la función entregada como parámetro.
La función deberá realizar cualquier comprobación con el valor actual del array y devolver un valor boleano.
Si es true, querrá decir que el elemento nos interesa guardarlo.
Como parte de su definición, filter acepta como parámetro una función (callback) la cual se ejecutará por cada elemento del array y deberá de retornar true para indicar que el elemento actual debe de ser incluido en el nuevo array o false en caso contrario.
let filterNumArray = numArray.filter(element => element > 5)
El resultado será el mismo, la única diferencia es que las expresiones Arrow Functions son más limpias y memos verbosas
Esto devolverá el mismo resultado, pero seguro notarás que tu código queda más prolijo.
Filtrar números
Vamos a realizar un ejemplo sencillo con el array de números anterior.
Supongamos que nos queremos quedar con todos los números positivos que tenemos en ese array.
Como ves, esta función recibe un número por parámetro.
Dependiendo de si el número es positivo o negativo, devuelve true o false.
Filtrar cadenas de texto
Por supuesto, podemos tener cualquier tipo de valor en el array, como cadenas, booleanos, o incluso valores compuestos como objetos.
Simplemente necesitamos alimentar a filter() con una función que devuelva true o false dependiendo de si nos queremos quedar el elemento en el array resultante o no.
Ahora vamos a hacer un filtrado para quedarnos solamente las palabras que empiezan por «a».
Usar el índice durante el filtrado
La función con la que alimentamos el método filter también puede recibir por parámetro el índice del elemento actual.
Posiblemente lo necesitemos si nuestro filtrado depende de factores como la posición del elemento dentro del array.
Filtrar un arreglo con un bucle for
Antes del lanzamiento de ES6 en 2015, muchos desarrolladores dependían del método del bucle for para hacer todas las manipulaciones de arreglos.
Pero para empezar, y entender todo el panorama, vamos a aprender cómo hacerlo usando bucles.
Supongamos que tenemos un arreglos de objetos que contiene todos los datos de los usuarios como nombre, edad, ocupación, etc.
Este código va a devolver un arreglo de tres usuarios que cumplen con esa condición:
Si bien esto funciona bastante bien, una mejor manera de filtrar un arreglo es usando el método filter() de ES6.
Filtrar un arreglo de objetos
También aprenderás a filtrar un arreglo de objetos y devolver un arreglo compuesto por los elementos filtrados.
Por supuesto, podemos tener cualquier tipo de valor en el array, como cadenas, booleanos, o incluso valores compuestos como objetos.
Supongamos que tenemos un arreglos de objetos que contiene todos los datos de los usuarios como nombre, edad, ocupación, etc.
En código sensible a la seguridad -como respuestas de API o aplicación de roles de usuario-filtro se utiliza a menudo para determinar qué datos debe ver un usuario.
Cuando se implementan interfaces de búsqueda, es posible que se filtren matrices para obtener sugerencias.
Cómo filtrar un objeto en JavaScript
Los objetos de JavaScript no son iterables como los arreglos o las cadenas de texto.
Esto significa que no pueden ser recorridos con un bucle for, el método filter() o cualquier otro método parecido a estos.
Entonces ¿cómo se puede filtrar un objeto en JavaScript?
Esto se puede hacer convirtiendo el objeto en un arreglo mediante cualquier método de objeto como Object.keys(), Object.values() o Object.entries().
Luego, puedes usar el método filter() para filtrar a través del arreglo y devolver uno nuevo con los elementos filtrados.
Por ejemplo, si tenemos un objeto con datos de los usuarios como nombre, edad y ocupación.
Pero como seguro querrás utilizar un mejor método de filtrado, puedes, por ejemplo, filtrar el par clave-valor de nuestro objeto que incluya un nombre de un objeto mayor.
Inmutabilidad y rendimiento
A diferencia de los bucles que mutan los datos, el filtro crea un nuevo conjunto y deja el original sin cambios, convirtiéndolo en un elemento básico de los patrones de programación funcional.
La matriz original permanece intacta, lo que admite prácticas de programación inmutable.
Es importante recordar que el filtro funciona en O(n) lo que significa que el rendimiento disminuye linealmente a medida que aumenta el tamaño de la matriz.
Este uso aparece en el código de la interfaz de usuario, los filtros de búsqueda, las canalizaciones de datos, etc.
Cuando se trabaja con miles o millones de registros, el simple filtrado de matrices puede convertirse en un problema, especialmente en los bucles de renderización o en los cuadros de mando de datos en tiempo real.
Algunas aplicaciones a gran escala incluso aprovechan la partición de datos para que la lógica de filtrado se aplique sólo a los subconjuntos relevantes en lugar de a toda la matriz.
| Aspecto | Descripción |
|---|---|
| Resultado | El filtro devuelve una nueva matriz. |
| Datos originales | La matriz original permanece intacta. |
| Complejidad | El filtro funciona en O(n). |
| Aplicaciones | Código de la interfaz de usuario, filtros de búsqueda, canalizaciones de datos y cuadros de mando de datos en tiempo real. |
Errores frecuentes al filtrar datos
En filtro es potente, es fácil utilizarlo mal.
Por ejemplo, esperar que el array original cambie puede llevar a errores lógicos.
A menudo se necesitan varias condiciones.
Esto funciona, pero puede ser algo ineficiente.
Elegir la herramienta adecuada evita el mal uso y los errores lógicos.
Omitir una comprobación esencial, como el rol o la propiedad, puede provocar fallos de seguridad.
Si la lógica de negocio interna requiere que los usuarios también tengan propiedad, esto puede exponer inadvertidamente datos no autorizados.
Filtrado y seguridad de los datos
En la práctica, el filtro es esencial para la transformación de datos, la selección condicional, la lógica de seguridad y las reglas de negocio en frontend, backend y escenarios de pruebas automatizadas, especialmente en los ecosistemas modernos de JavaScript.
En código sensible a la seguridad -como respuestas de API o aplicación de roles de usuario-filtro se utiliza a menudo para determinar qué datos debe ver un usuario.
Omitir una comprobación esencial, como el rol o la propiedad, puede provocar fallos de seguridad.
Si la lógica de negocio interna requiere que los usuarios también tengan propiedad, esto puede exponer inadvertidamente datos no autorizados.
Las pruebas automatizadas garantizan que las funciones de filtrado se comportan como se espera.
Plataformas de seguridad modernas como PenligentePenligent, una suite inteligente de pruebas de penetración y automatización, puede ayudar a analizar la lógica de filtrado en todas las bases de código.
¿Cómo obtener valores de tablas HTML con JavaScript? - Curso de JavaScript- Capítulo 53
Plugins para filtrar tablas
Una opción es programar cada consulta o busqueda y otra es utilizar un plugin para gestionar la tabla.
Un plugin muy interesante es HTML Table Filter un script escrito en javascript que se encarga de gestionar diferentes parámetros de una tabla html de datos.
Comenzaremos añadiendo las librerias del plugin tablefilter al <head> de nuestra pagina listadoventa.html o la extension que se utilice ya que puede utilizarse con php o asp.net o cualquiera que genere html.
La librería se compone de un archivo javascript tablefilter y uno de hojas de estilo CSS.
JavaScript filtro puede parecer sencillo, pero desempeña un papel fundamental en la lógica de la aplicación, la capacidad de respuesta de la interfaz de usuario, la seguridad de los datos y el rendimiento.
tags: #filtrar #tabla #javascript
Publicaciones populares:
- Rebel 500: pasos esenciales para el cambio del filtro de aire y el mantenimiento
- Instalación de ozonizadores: croquis y precauciones
- Cómo la EDAR de Ceutí combate contaminantes emergentes con tecnología avanzada
- Protección del compresor Goni con filtro de aire: rendimiento óptimo
- Mantenimiento del filtro de recirculación de gases en el BMW E90