Crea un buscador sin necesidad de recargar para una tabla HTML en jQuery

En este tutorial os mostraré cómo implementar un buscador para una tabla HTML que no necesita recargar para funcionar, con jQuery. Es un snippet de código muy simple y sencillo que puedes utilizar en aplicaciones pequeñas en las que quieras añadir un rápido buscador. Solo son 10 líneas de código, y a cambio obtendrás un maravilloso y veloz buscador que podrás insertar en tus propios proyectos. ¿Preparado? ¡Pues vamos allá!

Como os he mencionado antes, el código de este tutorial es muy sencillo. Lo primero que tienes que hacer es crear la tabla.

<div class="form-group">
<input type="text" class="form-control pull-right" style="width:20%" id="search" placeholder="Type to search table...">
</div>

<table class="table-bordered table pull-right" id="mytable" cellspacing="0" style="width: 100%;">
<thead>
<tr role="row">
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</thead>
<tbody>
<tr>
<td>Satou Nao</td>
<td>Accountant</td>
<td>Tokyo</td>
<td>33</td>
<td>2008/11/28</td>
<td>$162,700</td>
</tr>
<tr>
<td>Ramos</td>
<td>Chief Executive Officer (CEO)</td>
<td>London</td>
<td>47</td>
<td>2009/10/09</td>
<td>$1,200,000</td>
</tr>
<tr>
<td>Ashton Cox</td>
<td>Junior Technical Author</td>
<td>San Francisco</td>
<td>66</td>
<td>2009/01/12</td>
<td>$86,000</td>
</tr>
<tr>
<td>Brad Gree</td>
<td>Software Engineer</td>
<td>London</td>
<td>41</td>
<td>2012/10/13</td>
<td>$132,000</td>
</tr>
<tr>
<td>Wagner Kumar</td>
<td>Software Engineer</td>
<td>San Francisco</td>
<td>28</td>
<td>2011/06/07</td>
<td>$206,850</td>
</tr>
<tr>
<td>Williamson j.</td>
<td>Integration Specialist</td>
<td>New York</td>
<td>61</td>
<td>2012/12/02</td>
<td>$372,000</td>
</tr>
<tr>
<td>Salman Khan</td>
<td>Software Engineer</td>
<td>London</td>
<td>38</td>
<td>2011/05/03</td>
<td>$163,500</td>
</tr>
<tr>
<td>Vinton Cerf</td>
<td>Pre-Sales Support</td>
<td>New York</td>
<td>21</td>
<td>2011/12/12</td>
<td>$106,450</td>
</tr>
<tr>
<td>Naveen Mishra</td>
<td>Sales Assistant</td>
<td>New York</td>
<td>46</td>
<td>2011/12/06</td>
<td>$145,600</td>
</tr>
<tr>
<td>Zohair Raza</td>
<td>Engineer</td>
<td>Dubai</td>
<td>30</td>
<td>2012/03/29</td>
<td>$433,060</td>
</tr>
</tbody>
</table>

Ahora, incluir jQuery

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>

Y por último, añadimos este snippet de jQuery.

<script>
// Write on keyup event of keyword input element
$(document).ready(function(){
$("#search").keyup(function(){
_this = this;
// Show only matching TR, hide rest of them
$.each($("#mytable tbody tr"), function() {
if($(this).text().toLowerCase().indexOf($(_this).val().toLowerCase()) === -1)
$(this).hide();
else
$(this).show();
});
});
});
</script>

El código del snippet de arriba funcionará mediante el evento onkeyup y buscará en los registros existentes de la tabla.

Nota: Esta caracterísitca puede ser utilizada para llevar a cabo un filtro del lado del cliente.

Fuente: phpgang.com

COMPARTE ESTE ARTÍCULO

COMPARTIR EN FACEBOOK
COMPARTIR EN TWITTER
COMPARTIR EN LINKEDIN
COMPARTIR EN WHATSAPP