• Saltar a la navegación principal
  • Saltar al contenido principal
  • Saltar a la barra lateral principal

DecodeCMS

Tu WordPress a otro Nivel ...

  • Acerca de
  • Contacto
  • Inicio
  • Tutoriales
    • Themes
    • Plugins
    • Core
    • Recursos
  • Cursos
  • Acceder
    • Mis cursos
    • Mi Cuenta
    • Acceder
Inicio / Tutoriales / Themes / Búsqueda en tabla personalizada en WordPress

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

  • Shortcode para búsqueda en tabla personalizada en WordPressShortcode para búsqueda en tabla personalizada en WordPress
  • Guardar las búsquedas internas en WordPressGuardar las búsquedas internas en WordPress
  • Mostrar Tabla Personalizada con Búsqueda y Paginación en WordPressMostrar Tabla Personalizada con Búsqueda y Paginación en WordPress
  • Leer datos desde otra base de datos en WordPressLeer datos desde otra base de datos en WordPress
Valora este artículo : 1 barra2 barras3 barras4 barras5 barras (3 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.

  3. Wil Elías

    29 junio, 2021

    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?

    • Jhon Marreros Guzmán

      29 junio, 2021

      Hola, en ese caso te recomiendo hacer una vista, es decir una consulta que relacione ambas tablas y las trate como una sola.
      Saludos.

  4. Carlos

    1 julio, 2021

    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?

    • Jhon Marreros Guzmán

      6 julio, 2021

      Hola, en la consulta SQL sólo deberías definir los campos que quieres mostrar.

  5. angel

    11 julio, 2021

    muy bueno el esquema y contenido del video. el mensaje esta claro y de forma sencilla.

    • Jhon Marreros Guzmán

      14 julio, 2021

      Gracias 🙂

  6. Israel

    11 noviembre, 2021

    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

    • Jhon Marreros Guzmán

      16 noviembre, 2021

      Hola, si, voy a realizar un artículo sobre esto que incluya paginación y búsqueda.

    • Jhon Marreros Guzmán

      17 noviembre, 2021

      He realizado recientemente un artículo con esta funcionalidad: https://decodecms.com/mostrar-tabla-personalizada-con-busqueda-y-paginacion-en-wordpress/

  7. Juan Barrera

    28 febrero, 2022

    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?

    • Jhon Marreros Guzmán

      28 febrero, 2022

      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/

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

*

* Gravatar habilitado

Barra lateral principal

Presentación

Curso Decodifica WordPress

Únete a DecodeCMS

Recibirás como regalo:

Guia práctica con video:
¿Quieres agregar código a WordPress? Revisa las diferentes opciones que tienes.Ver más

Jooble
Alojamiento Wordpress

Niveles

Básico Intermedio Avanzado

Etiquetas

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

Populares

Agregar Tabs personalizados en WooCommerce sin plugins

Deshabilitar el editor de bloques para Widgets en WordPress

Agregar Whatsapp en WordPress sin usar plugins

Mostrar lista de sub páginas en página padre en WordPress

© logo decode pie
Política de Privacidad | Política de devoluciones
Copyrigth 2023 Todos los derechos reservados