Hoy me introducire a un interesente modo de trabajar con tablas ayudado de JQuery.
Primero mostrare como formar un filtro.
Lo de siempre es primero incluir el core de JQuery, se esta viendo por conveniete descargar el archivo mismo y no hacer una referencia desde el servidor remoto (hotlink).
Luego es descargarte el plugin que hara el trabajo. Descargarlo e incluirlo en la cabecera de nuestra página.
La estructura de como se vera mas o menos esbosa esta forma:
<form id="filter-form">
<fieldset>
<legend>Listado de clientes</legend>
<label for="filter_clientes">Escriba o el CI o el nombre del Cliente:</label>
<input name="filter_clientes" type="text" id="filter_clientes" size="45" />
<table id="table_clientes">
<thead>
<tr>
<th scope="col">CI</th>
<th scope="col">Nombre y Apellido</th>
<th scope="col">Email</th>
<th scope="col">Teléfono</th>
<th scope="col" colspan="3">Estado</th>
</tr>
</thead>
<tbody>
<?php foreach ( $rows as $row ):?>
<tr>
<td><?php echo utf8_encode( $row->ci );?></td>
<td><?php echo utf8_encode( $row->name );?></td>
<td><?php echo utf8_encode( $row->email );?></td>
<td><?php echo utf8_encode( $row->telefono );?></td>
<td><?php echo utf8_encode( $row->estado );?></td>
<td><a href="edit_client.php?id=<?php echo $row->id_cliente;?>"><img src="images/b_edit.png" width="16" height="16" alt="edit" /></a></td>
<td><a href="drop_client.php?id=<?php echo $row->id_cliente;?>" onclick="return confirm('¿Confirma eliminar Cliente?');"><img src="images/b_drop.png" width="16" height="16" alt="drop" /></a></td>
</tr>
<?php endforeach;?>
</tbody>
</table>
</fieldset>
</form>
Veremos priemro de definir los id necesarios para trabajar. definiremos un id para un formulario, en este ejemplo usaremos filter-form y el textfield tendra otro id el cual le pondremos filter_clientes. Hecho esto se define en la tabla otro id, usaremos table_clientes.
Ahora solo queda definir las funcionalidades con JQuery.
<script type="text/javascript">
$(function() {
var theTable = $('table#table_clientes')
theTable.find("tbody > tr").find("td:eq(1)").mousedown(function(){
$(this).prev().find(":checkbox").click()
});
$("#filter_clientes").keyup(function() {
$.uiTableFilter( theTable, this.value );
});
$('#filter-form').submit(function(){
theTable.find("tbody > tr:visible > td:eq(1)").mousedown();
return false;
}).focus(); //Give focus to input field
});
</script>
Son tres funciones que hacen el trabajo.
La primera funcion permite separar las filas que coicidadan, ya sea texto o números o simbolos, con lo que estemos ecribiendo en el textfield.
La segunda función simplemente captura el evento de escribir en textfield haciendo la busqueda en el tabla.
Y el último método, evita que se haga un submit al formulario, haciendo el trabajo de filtrado de las filas que coicidadan con lo que se ha escrito en textfield.
Pruebalo