• Ir a navegación principal
  • Ir al contenido principal
  • Ir a la barra lateral primaria

DecodeCMS

Tu WordPress a otro Nivel ...

  • Acerca de
  • Contacto
  • Inicio
  • Tutoriales
    • Themes
    • Plugins
    • Core
    • Recursos
  • Cursos
Inicio / Tutoriales / Themes / Búsqueda en tabla personalizada en WordPress
Anuncio banner webservi

Búsqueda en tabla personalizada en WordPress

Búsqueda en tabla personalizada en WordPress

[ 3 marzo 2021 ] [ Autor: Jhon Marreros Guzmán ][ Themes - Intermedio] [ ]

js mejoras

¿Me ayudas a llegar a más gente?

Twittear Compartir LinkedIn WhatsApp

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:

Filtro búsqueda tabla resultado final

 

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

Si aún no tienes una tabla HTML con tus datos, puedes revisar:

  • Mostrar datos desde una tabla personalizada de tu base de datos de WordPress.
  • Mostrar datos desde una tabla personalizada de otra base de datos.

 

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.

Suscríbete a DecodeCMS:  

 

¿Me ayudas a llegar a más gente?

Twittear Compartir LinkedIn WhatsApp

Artículos Relacionados

  • Leer datos desde otra base de datos en WordPressLeer datos desde otra base de datos en WordPress
  • Mostrar datos desde una tabla personalizada de la base de datos de WordPressMostrar datos desde una tabla personalizada de la base de datos de WordPress
  • Agregar archivos de fuentes tipográficas en WordPressAgregar archivos de fuentes tipográficas en WordPress
  • Agregar subtítulos en WordPressAgregar subtítulos en WordPress
Valora este artículo : 1 barra2 barras3 barras4 barras5 barras (1 votos, promedio: 5,00 de 5)
Cargando...

Interacciones con los lectores

Comentarios

  1. Manuel

    24 marzo, 2021

    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

    • Jhon Marreros Guzmán

      25 marzo, 2021

      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.

  2. adrian

    30 marzo, 2021

    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

    • Jhon Marreros Guzmán

      4 abril, 2021

      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.

Para escribir código envolver con: <pre class="language-xxx"><code> </code></pre> ,reemplaza las xxx (php, css, html)

*

* Gravatar habilitado

Barra lateral primaria

Presentación

Únete a DecodeCMS

Recibirás como regalo:

Guia práctica con video:
Los 5 posibles errores que estas cometiendo cuando trabajas con código en WordPress

Niveles

Básico Intermedio Avanzado

Etiquetas

accesibilidad css dashboard editor error funcionalidad herramientas imagen js librería mejoras optimización seguridad social

Populares

Mostrar mensajes en la administración de WordPress y en Gutenberg

Mostrar el stock en la lista de productos de WooCommerce

Administrar tabla wp_options desde el Backend de WordPress

Generar código para WordPress con GenerateWP

Recientes

  • Guía visual de Hooks para StoreFront y WooCommerce
  • Extraer un sitio desde un multisite
  • Eliminar el slug de la URL de un Custom Post Type
  • Búsqueda en tabla personalizada en WordPress
alojamiento wordpress

© logo decode pie Copyright 2021 | Todos los derechos reservados | Política de Privacidad