Código de JavaScript - Función para buscar y filtrar valores en tabla HTML (elemento del DOM)

Imágen de perfil
Val: 572
Bronce
Ha mantenido su posición en JavaScript (en relación al último mes)
Gráfica de JavaScript

Función para buscar y filtrar valores en tabla HTML (elemento del DOM)gráfica de visualizaciones


JavaScript

Publicado el 22 de Febrero del 2017 por Kip (28 códigos)
11.394 visualizaciones desde el 22 de Febrero del 2017
Función que busca y muestra las celdas con el valor tomado de un input text, si no existe el dato o valor se mostrara un mensaje en la tabla.

Screenshot_404

Screenshot_405

Screenshot_406

Es de suma importancia que la tabla tenga una estructura como la siguiente thead -> tr -> th y tbody -> tr -> td:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<table>
	<thead>
		<tr>
			<th>
			</th>
			.........
		</tr>
	</thead>
	<tbody>
		<tr>
			<td>
			</td>
			.........
		</tr>
	</tbody>
</table>

Para usarla se debe colocar el archivo btab.js (con el path adecuado) en el archivo HTML de esta forma:

1
<script src="btab.js"></script>

La función recibe tres parámetros:

btab(id_del_input, id_de_tabla, true or false [OPCIONAL] )

El primer parámetro es el el atributo id del input, de alli se obtendra el valor a buscar.
El segundo parámetro es el atributo id de la tabla, donde se buscaran los datos.
Por último y opcional, un booleano sea este true o false indicara si la busqueda sera insensible a mayúsculas, por defecto es sensible a estas (false) y si si desea cambiar esto pasarle como valor true.

La búsqueda se realiza en todas las celdas de la tabla, si en alguna de estas existe el dato de búsqueda se mostrara toda la fila perteneciente a esta celda.

Ejemplo:
Screenshot_402

Es posible buscar mas de un dato en la tabla, para esto se debe separar por una coma , (valor1, valor2, ....) cada valor a buscarse.

Ejemplo:
Screenshot_403

La llamada a la funcion (por si usas jQuery) no se debe colocar dentro de las lineas:
1
$(document).ready(...

Esta funcion se encarga de ejecutarse por si misma cuando el DOM esta completamente cargada para evitar algun problema con los elementos de este.

Si surge algún problema con la función escribirlo por aqui, pronto se mejorara y añadiran mas detalles.

Saludos

Requerimientos

Navegador

1.0
estrellaestrellaestrellaestrellaestrella(10)

Actualizado el 21 de Mayo del 2017 (Publicado el 22 de Febrero del 2017)gráfica de visualizaciones de la versión: 1.0
11.395 visualizaciones desde el 22 de Febrero del 2017
estrellaestrellaestrellaestrellaestrella
estrellaestrellaestrellaestrella
estrellaestrellaestrella
estrellaestrella
estrella

Si alguno de los archivos de descarga no funciona, comentanos aquí el error.




Comentarios sobre la versión: 1.0 (10)

Imágen de perfil
24 de Febrero del 2017
estrellaestrellaestrellaestrellaestrella
Impresionante!!!
Responder
Imágen de perfil
25 de Febrero del 2017
estrellaestrellaestrellaestrellaestrella
Muy logrado!
Responder
11 de Abril del 2017
estrellaestrellaestrellaestrellaestrella
¿Esta función:
1
<script src="btab.js"></script>
en que linea debo meter en el parrafo de table? Estoy aprendiendo. Gracias.
Responder
Imágen de perfil
12 de Abril del 2017
estrellaestrellaestrellaestrellaestrella
1
<script src="btab.js"></script>
Debe ir antes de llamar a la funcion btab(), puede estar entre las etiquetas <head></head>, es lo mas recomendable.
Responder
Dayan
7 de Julio del 2019
estrellaestrellaestrellaestrellaestrella
Gracias!!! Muy bueno y sencillo.
Responder
Jairo Paredes
23 de Octubre del 2019
estrellaestrellaestrellaestrellaestrella
Genial me fue de excelente ayuda, cinco estrellas por tu aporte.
Responder
efra
4 de Abril del 2020
estrellaestrellaestrellaestrellaestrella
Como puedo ignorar las mayusculas en la busqueda y los acentos?
Responder
Fabricio
18 de Mayo del 2020
estrellaestrellaestrellaestrellaestrella
Hola, IMPRESIONANTE!!!! muy bueno...

lo unico que a mi no me anda porque yo uso un archivo .js para llenar la tabla y parece que el filtro solo reconoce cuando cargo los datos en la misma pagina y no cuando otro archivo la carga

este es el index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
	<!--<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />-->
	<link rel="icon" href="favicon.ico" />
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
	<meta http-equiv="X-UA-Compatible" content="ie-edge">
 
    <title>Casa Gatica</title>
 
	<script src="btab.js"></script>
 
	</head>
  <body>
 
 
	<div class="container mt-5">
		<div id="contenido">
 
			<input id="buscar" class="form-control mr-sm-2" type="search" placeholder="" aria-label="Search">
			<table id="tabla" class="table table-hover my-3" style="cursor:pointer;">
				<thead>
					<tr>
						<th scope='col'>nombre y apellido</th>
						<th scope='col'>celular</th>
					</tr>
				</thead>
				<tbody id="datos">
					<tr>
					  <td></td>
					  <td></td>
					</tr>
				</tbody>
			</table>
			<script type="text/javascript">
				btab('buscar', 'tabla'); // Iniciamos la funcion...
			</script>
		</div>
	</div>
 
	<script src="app.js"></script>
	<script src="Paginas/PaginaContactos.js"></script>
  </body>
</html>

y PaginaContactos.js llena la tabla
Responder
Imágen de perfil
20 de Mayo del 2020
estrellaestrellaestrellaestrellaestrella
En ese caso ejecuta esta linea btab('buscar', 'tabla'); despues de haber cargado los datos, posiblemente debajo de <script src="Paginas/PaginaContactos.js"></script>
Responder
Fabricio
20 de Mayo del 2020
estrellaestrellaestrellaestrellaestrella
Hola Kip, gracias por tu pronta respuesta!!!

si, probe eso y tampoco me busca...
te paso como queda el html ejecutado (ver codigo fuente):

como cargo la tabla usando un js por medio de innerHTML puede ser que en el sitio veo los datos pero en el codigo fuente no, tal vez ese es el motivo

mil gracias!! seguire investigando...


<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<!--<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />-->
<link rel="icon" href="favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta http-equiv="X-UA-Compatible" content="ie-edge">

<title>Casa Gatica</title>



<script src="btab.js"></script>


</head>
<body onload="leerContactos();">

<div class="container">
<div class="pos-f-t">
<nav class="navbar navbar-dark bg-primary">
<button id="menu" class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarToggleExternalContent" aria-controls="navbarToggleExternalContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>

<a class="navbar-brand">
<img src="LOGOGATICA.png" width="70" height="70" class="d-inline-block align-top" alt="">
<!--Ingreso-->
</a>
<div class="form-inline" id="login">

</div>
</nav>


<div class="collapse" id="navbarToggleExternalContent">
<div class="bg-dark p-4">
<h5 class='text-white h4' style="cursor:pointer;" onclick="contactos()">Contactos</h5>
<span class='text-muted'>Contactos existentes</span>
<h5 class='text-white h4' style="cursor:pointer;" onclick="actividades()">Actividades</h5>
<span class='text-muted'>Actividades que se realizan</span>
<h5 class='text-white h4' style="cursor:pointer;" onclick="comercios()">Comercios</h5>
<span class='text-muted'>Comercios del barrio</span>
<h5 class='text-white h4' style="cursor:pointer;" onclick="empleos()">Bolsa de Empleo</h5>
<span class='text-muted'>Bolsa de Empleo de búsquedas activas</span>
<h5 class='text-white h4' style="cursor:pointer;" onclick="servicios()">Servicios</h5>
<span class='text-muted'>Servicios útiles</span>
<h5 class='text-white h4' style="cursor:pointer;" onclick="tramites()">Tramites</h5>
<span class='text-muted'>Recursero de trámites</span>
<h5 class='text-white h4' style="cursor:pointer;" onclick="sitios()">Sitios Amigos</h5>
<span class='text-muted'>Sitios web Amigos</span>
<h5 class='text-white h4'>Geolocalizar</h5>
<span class='text-muted'>Geolocalizar diferentes puntos</span>
<h5 class='text-white h4'>Agenda</h5>
<span class='text-muted'>Agenda de actividades</span>
</div>
</div>
</div>


</div>


<div class="container mt-5">
<div id="contenido">

<input id="buscar" class="form-control mr-sm-2" type="search" placeholder="" aria-label="Search">
<table id="tabla" class="table table-hover my-3" style="cursor:pointer;">
<thead>
<tr>
<th scope='col'>nombre y apellido</th>
<th scope='col'>celular</th>
</tr>
</thead>
<tbody id="datos">
<tr>
<td></td>
<td></td>
</tr>
</tbody>
</table>
</div>
</div>


<script src="app.js"></script>
<script src="Paginas/PaginaContactos.js"></script>

<script type="text/javascript">
btab('buscar', 'tabla'); // Iniciamos la funcion...
</script>


</body>
</html>
Responder

Comentar la versión: 1.0

Nombre
Correo (no se visualiza en la web)
Valoración
Comentarios...
CerrarCerrar
CerrarCerrar
Cerrar

Tienes que ser un usuario registrado para poder insertar imágenes, archivos y/o videos.

Puedes registrarte o validarte desde aquí.

Codigo
Negrita
Subrayado
Tachado
Cursiva
Insertar enlace
Imagen externa
Emoticon
Tabular
Centrar
Titulo
Linea
Disminuir
Aumentar
Vista preliminar
sonreir
dientes
lengua
guiño
enfadado
confundido
llorar
avergonzado
sorprendido
triste
sol
estrella
jarra
camara
taza de cafe
email
beso
bombilla
amor
mal
bien
Es necesario revisar y aceptar las políticas de privacidad

http://lwp-l.com/s3875