En un artículo anterior habíamos visto cómo mostrar datos desde una tabla personalizada de la base de datos de WordPress , sin embargo a raíz de ese artículo surgieron algunas preguntas respecto a si es posible realizar una funcionalidad de búsqueda en base a la tabla.
Resultado Final
Al final obtendremos algo similar a lo que se muestra en la siguiente imagen:
Código previo para mostrar datos
El código se basa principalmente en javascript, como requisito se requiere tener los datos en una estructura de tabla HTML
Código PHP para insertar archivo javascript
El siguiente código lo que hace es básicamente poner en cola un nuevo archivo javascript con algunos parámetros.
add_action("wp_enqueue_scripts", "dcms_insertar_js");
function dcms_insertar_js(){
$params = [
'table' => 'table.table-data',
'placeholder' => 'Buscar empleados'
];
wp_enqueue_script('searchtable', get_stylesheet_directory_uri(). '/js/script.js', array('jquery'), '1', true );
wp_localize_script('searchtable', 'vars_table', $params);
}
En el código anterior:
- Encolamos un archivo javascript llamado script.js que esta en la carpeta js del tema o tema hijo que tengas activo
- Pasamos dos parámetros que serán usados por el archivo javascript, el más importante es el selector de la tabla, en nuestro ejemplo esta haciendo referencia a la etiqueta HTML table con una clase table-data
Código javascript para búsqueda en tabla
Puedes agregar el siguiente código en el archivo script.js que se registro anteriormente.
En el código anterior:
- Recuperamos el selector de la tabla del objeto vars_table
- Creamos el input de búsqueda y lo insertamos antes de la tabla
- Seleccionamos todas las filas de la tabla, salvo la primera
- Utilizamos el evento keyup del input de búsqueda
- Obtenemos el valor del input quitando espacios y convirtiendo el texto a minúsculas
- Filtramos las filas que sólo tengan un valor similar al input, utilizamos indexOf
- Usamos ~ para convertir -1 a 0 y ! para negarlo
- Todos los valores que cumplan esta condición serán ocultados, quedando sólo los que coincidan
Conclusión
Como has podido comprobar, puedes recuperar datos desde una tabla y darle la funcionalidad de búsqueda de manera simple a través de código javascript. Ten en cuenta sin embargo que haciéndolo de esta forma sólo funciona para datos que ya están cargados en el navegador.
¿Aún con dudas?, en el siguiente video detallo los puntos anteriores en una implementación de ejemplo.
Artículos Relacionados
(3 votos, promedio: 5,00 de 5)
Cargando...
Buenas,
¿Si quisiera crear un formulario con filtros dinámics y luego mostrar los resultados filtrados? Por ejemplo, que primero no haya tabla, que al elegir el pais en la primera lista, en la segunda lista aparecieran solo las ciudades de ese pais, y al elegir la ciudad, pulse en buscar y muestre la tabla con los pueblos de la ciudad elegida.
Muchisimas gracias por la información, explicas muy bien
Hola, si todos los datos ya lo tienes precargados, aunque los puedes ocultar al inicio, sería manejarlo de manera similar, todo con javascript en el navegador. Si los datos no los precargas sería usar Ajax. El filtrado condicional que comentas igualmente tiene que programarse, espero hacer algo más elaborado de este tipo de filtros en el futuro.
Hola!
¿De qué manera puedo hacer elección de uno de los registros filtrados y mostrarlo de forma individual pero incluyendo más campos?
Muy didácticos tus videos, gracias
Hola
Lo usual sería que hagan click en el elemento y luego aparezca un pop-up, o lo otro sería mostrar un enlace en una de las columnas, y ese enlace llevar a una página de detalle.
Hola, muy buen tutorial, ya lo implementé para un “directorio” de mis usuarios y todo super bien.
Una consulta, si yo deseo que en la página frutas, en mi caso “usuarios”, aparezcan datos de la tabla user_metadatos, ¿cómo hago para que aparezcan, y que sean del usuario que se está buscando?
Hola, en ese caso te recomiendo hacer una vista, es decir una consulta que relacione ambas tablas y las trate como una sola.
Saludos.
HOLA, me ayudo tus tres post sobre este tema de mostrar BD en WordPress.
Tengo una consulta! que código necesito modificar para ocultar los datos de la BD y solo me muestre el dato especifico en la búsqueda?
Hola, en la consulta SQL sólo deberías definir los campos que quieres mostrar.
muy bueno el esquema y contenido del video. el mensaje esta claro y de forma sencilla.
Gracias 🙂
Hola gran post, me podrías dar alguna idea de como crear una paginación ya que yo tengo una tabla que trae 400 registros y es muy incomodo cargalos todos, el campo de busqueda me ayuda pero no creo que sea lo mejor en mi caso.
Saludos
Hola, si, voy a realizar un artículo sobre esto que incluya paginación y búsqueda.
He realizado recientemente un artículo con esta funcionalidad: https://decodecms.com/mostrar-tabla-personalizada-con-busqueda-y-paginacion-en-wordpress/
Hola! Una consulta, tengo una idea parecida pero no sé si es realizable en la práctica: mi idea es para una universidad para tener un buscador de aula de clases. El estudiante ingresa el número del aula en el cuadro de búsqueda y solo quiero que me arroje el resultado y no toda la tabla, es posible esto?
Hola Juan, si, claro, revisa el siguiente artículo que hace lo que comentas: https://decodecms.com/shortcode-para-busqueda-en-tabla-personalizada-en-wordpress/