En este artículo veremos como imprimir los datos de una tabla Mysql, para luego poder ir filtrando los resultados por diferentes tipos de búsqueda tales como (entre rango fechas, ingresando criterios y seleccionando opciones), además cuanta con la opción ordenar por sus campos.
Esta sera la estructura de nuestra tabla MySQL:
CREATE TABLE `personas` ( `id` int(11) NOT NULL auto_increment, `nombre` varchar(40) NOT NULL, `email` varchar(50) NOT NULL, `nacimiento` date NOT NULL, `pais` int(11) NOT NULL, PRIMARY KEY (`id`) ) ENGINE=MyISAM DEFAULT CHARSET=utf8 AUTO_INCREMENT=13 ;
El campo país esta relacionada con otra tabla países, que se encuentra en la descarga.
PLUGINS
Para nuestro calendario haremos uso del componente jquery ui.
<link rel="stylesheet" type="text/css" href="assets/jqueryui/css/smoothness/jquery-ui-1.8.16.custom.css"/> <script type="text/javascript" src="assets/js/jquery-1.7.2.min.js"></script> <script type="text/javascript" src="assets/jqueryui/js/jquery-ui-1.8.16.custom.min.js"></script> <script type="text/javascript" src="assets/js/js.js"></script>
HTML
Sencillo html donde tenemos un formulario con los diferentes criterios de búsqueda, además una tabla para mostrarar los datos.
<div id="content">
<div class="filtro">
<form id="frm_filtro" method="post" action="">
<ul>
<li><label>Nacimiento: del</label>
<input type="text" name="del" id="del" size="15" class="datepicker" />
al
<input type="text" name="al" id="al" size="15" class="datepicker" /></li>
<li><label>Nombre/Email:</label> <input type="text" name="nombre_email" size="25" /></li>
<li><label>Pais:</label>
<select name="pais">
<option value="0">--</option>
<!-- Listar Paises -->
<?php
$query = mysql_query("SELECT * FROM pais");
while($row = mysql_fetch_array($query)){
?>
<option value="<?php echo $row['id_pais'] ?>">
<?php echo $row['nombre_pais'] ?>
</option>
<?php
}
?>
</select>
</li>
<li>
<button type="button" id="btnfiltrar">Filtrar</button>
</li>
<li>
<a href="javascript:;" id="btncancel">Todos</a>
</li>
</ul>
</form>
</div>
<table cellpadding="0" cellspacing="0" id="data">
<thead>
<tr>
<th width="22%"><span title="nacimiento">Fecha Nacimiento</span></th>
<th width="35%"><span title="nombre">Nombre</span></th>
<th width="30%"><span title="email">Email</span></th>
<th><span title="nombre_pais">Pais</span></th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>
JAVASCRIPT
Script para la configuración del calendadio jqueryu ui ademas de la funcion filtrar() para hacer la búsqueda y orden de los registros.
// JavaScript Document
// variable general para ordenar los registros
var ordenar = '';
$(document).ready(function(){
// Llamando a la funcion de busqueda al
// cargar la pagina
filtrar()
// Configuracion del calendario
var dates = $( "#del, #al" ).datepicker({
yearRange: "-50",
defaultDate: "+1w",
changeMonth: true,
changeYear: true,
onSelect: function( selectedDate ) {
var option = this.id == "del" ? "minDate" : "maxDate",
instance = $( this ).data( "datepicker" ),
date = $.datepicker.parseDate(
instance.settings.dateFormat ||
$.datepicker._defaults.dateFormat,
selectedDate, instance.settings );
dates.not( this ).datepicker( "option", option, date );
}
});
// filtrar al darle click al boton
$("#btnfiltrar").click(function(){ filtrar() });
// boton cancelar
// limpia todas las cajas de busqueda
$("#btncancel").click(function(){
$(".filtro input").val('')
$(".filtro select").find("option[value='0']").attr("selected",true)
filtrar()
});
// ordenar por campos
$("#data th span").click(function(){
var orden = '';
//si existe algun orden de forma descendente
if($(this).hasClass("desc"))
{
// eliminamos orden descendente y ascendente.
$("#data th span").removeClass("desc").removeClass("asc")
$(this).addClass("asc");
ordenar = "&orderby="+$(this).attr("title")+" asc"
}else
{
$("#data th span").removeClass("desc").removeClass("asc")
$(this).addClass("desc");
ordenar = "&orderby="+$(this).attr("title")+" desc"
}
filtrar()
});
});
// funcion general para hacer el filtro
function filtrar()
{
// funcion ajax de jquery, hara la peticion enviandole
// los parametros, y este devolvera resultado en formato
// json
$.ajax({
data: $("#frm_filtro").serialize()+ordenar,
type: "POST",
dataType: "json",
url: "ajax.php?action=listar",
success: function(data){
var html = '';
// si la consulta ajax devuelve datos
if(data.length > 0){
// hacemos un bucle al json, para recorrer cada registro
// e irlos almacenando en filas html
$.each(data, function(i,item){
html += '<tr>'
html += '<td>'+item.nacimiento+'</td>'
html += '<td>'+item.nombre+'</td>'
html += '<td>'+item.email+'</td>'
html += '<td>'+item.pais+'</td>'
html += '</tr>';
});
}
// si no hay datos mostramos mensaje de no encontraron registros
if(html == '') html = '<tr><td colspan="4" align="center">No se encontraron registros..</td></tr>'
// añadimos a nuestra tabla todos los datos encontrados mediante la funcion html
$("#data tbody").html(html);
}
});
}
PHP
Para finalizar archivo PHP que se encargara consultar y responder las peticiones Ajax atravez del javascript.
<?php
include("conexion.php");
if($_GET['action'] == 'listar')
{
// valores recibidos por POST
$vnm = $_POST['nombre_email'];
$vpais = $_POST['pais'];
$vdel = ($_POST['del'] != '' ) ? explode("/",$_POST['del']) : '';
$val = ($_POST['al'] != '' ) ? explode("/",$_POST['al']) : '';
$sql = "SELECT * FROM personas pe, pais p
WHERE pe.pais = p.id_pais ";
// Vericamos si hay algun filtro
$sql .= ($vnm != '') ? " AND CONCAT(nombre,' ', email) LIKE '%$vnm%'" : "";
$sql .= ($vpais > 0) ? " AND pe.pais = '".$vpais."'" : "";
$sql .= ($vdel && $val) ? " AND nacimiento BETWEEN '$vdel[2]-$vdel[1]-$vdel[0]'
AND '$val[2]-$val[1]-$val[0]' " : "";
// Ordenar por
$vorder = $_POST['orderby'];
if($vorder != ''){
$sql .= " ORDER BY ".$vorder;
}
$query = mysql_query($sql);
$datos = array();
while($row = mysql_fetch_array($query))
{
$datos[] = array(
'id' => $row['id'],
'nombre' => $row['nombre'],
'email' => $row['email'],
'nacimiento' => $row['nacimiento'],
'pais' => $row['nombre_pais']
);
}
// convertimos el array de datos a formato json
echo json_encode($datos);
}
?>
Espero que sea de gran utilidad el script y no se olviden de dejar su comentario si tienen alguna duda. 
hola muy buen ejemplo pero cuando quiero adaptarlo ami tabla me marca algunos errores no si puedes ayudarme,.,
ok dime cual es tu error mandando un email a jorge.developer@gmail.com, con mucho gusto le ayudare.
Es perfecto! se puede aplicar una paginación a los resultados?
Claro que si!!
Esta genial!! Ahora muestro un listado de casi 1000 resultados ¿como se puede aplicar un paginador para los resultados? Una pequeña idea seria estupendo para poder mirar como aplicarlo…gracias!!!!
Hola!
Gracias por tu ejemplo/code.
Si se pudiera agregar la funcionalidad de seleccionar un registro/fila para luego editarlo en un registro, al adicionar una columna mas “editar” al lado del campo Pais, es posible ?
Como se podria hacer para tomar el valor del registro seleccionado?
Tomando el valor del array datos?
Disculpa si la pregunta te es obvia o tonta, pero estoy tratando de desarrollar una aplicacion web, y he estado buscando desde hace tiempo una aplicacion que me permitiera buscar y filtrar y de todas las que he visto, tu aplicacion me parece la ideal.
Llegue a adaptar el funcionamiento de una aplicacion para insertar/editar/borrar registros de una base de datos utilizando la programacion estructurada.
Luego de adaptarla y tenerla 100% en funcionamiento, salte a la programacion orientada a objetos, y al conseguir tu aplicacion, pues me tropeze con lo que es JSON y ya me he puesto a investigar…
el caso es que ando un poco perdido, no se como implementar la opcion de seleccion mezclando todo tu codigo con programacion orientada a objetos, tu pagina y aplicaciones me parecen excelentes, si me pudieras ayudar… no pido que me facilites el codigo, pero me podrias ayudar indicando que deberia leer o hacia donde deberia “buscar” para dar con la forma de implentar tal opcion de seleccion/edicion ?
Muchas gracias!
Una preguntota lanza un error en el $vorder = $_POST['orderby'];
me marca que el orderby no hay nada pero cuando le doy en un th ya se no me lanza un error entonces nesetio mandarle algo hace variable para que cuando entre lanze la consulta?
En los th span se especifican los campos por el cual se ordenara.
amigo, esta bien tu post, y quiero adaptarlo a lo que estoy haciendo, pero en esta linea:
$sql = “SELECT * FROM personas pe, pais p WHERE pe.pais = p.id_pais “;
no se de donde sale el pe ni p? puedes explicarme a ver de que modo lo adapto. gracias de antemano.
Hola te explico p y pe vienen a ser alias para las tablas que estoy usando (personas y paises), se hace uso de esto cuando en la consulta sql se van relacionan varias tablas entonces para identificar cuales campos son de cada tabla se usan los alias y se usa de esta forma
pe.campotablapersonas, p.campotablapais.
hola necesito ayuda para hacer un buscador asi como el que se muestra pero con mas menu/lista y poder filtrar. que tengan 4 list menu Filtre por tipo de vehiculo, estado, ciudad, numero de puestos del vehiculo, y sexo de conductor. me gustaria que me ayudaran ha hacerlo
Hola,
he descargado tu plugin y al adaptarlo a mi tabla no me sale ningún dato, pero tampoco me da ningún error, no se si es porque no he modificado todo lo necesario para cambiarle el origen de los datos o porque.
Es que no me da ni el mensaje de no hay ningun dato ni nada.
Podrias ayudarme??.
Gracias y un saludo.
para listar todo lo de la tabla ??? al principio? me la carga vacia…
Hola, primero que nada gracia por compartir!
Descargue tu demo y cree la base de datos pero al momento de ejecutar la aplicación no me aparecen los registros… En el combobox si me aparecen los países, no me aparece ningún error ni nada que puede estarme fallando?
Excelente me da unas ideas de algunas cosas que queria realizar muchas gracias
Excelente aportacion, pero tengo un problema, cuando quiero adapatar a mi proyecto no me funciona, no se que tengo mal, si me podrian ayudar x favor…..
Enhorabuena!, muy buen ejemplo y muchas gracias, me ha servido muchísimo.
Unsaludo
hola que tal amigo excelente post me has salvado la vida solo una duda, si tuviera un select q me envia a tu proyecto y en ese select selecciono ej. mexico se podria cargar ese dato como variable y q a la hora de mostrar la tabla solo me muestre los datos de mexico? algo asi como el filtro que manejas pero desde una instancia anterior a tu tabla espero me haya explicado saludos
Hola
Como puedo cambiar el formato del calendario a año/mes/dia
(YYYY/MM/DD)
Saludos
Grandísimo ejemplo!!
Gran trabajo,solo le faltaría una paginación para ser perfecto!
necesito saber por que los datos no aparecen cuando cargo la pagina. porfavor me podrian ayudar ya subi la base y da en el box pero nada me gustaria que me pudieras ayudar
necesito saber por que a cargar la base los datos no me aparecen es para un proyecto universitario me gustaria que me ayduaras
Felicidades por el aporte- tengo un problema que no consigo solventar. En IE me da un error en data.lenght pues dice que es nulo o no esta definido.
Si pudierais ayudar os estare agradecido
Gracias por tus aportes.
Tengo un error que no consigo solventar. En IExplorer me da un error en la linea
// si la consulta ajax devuelve datos
if(data.length > 0) indicando que length es nulo o no esta definido.
¿alguien podria aportarme alguna pista para hacerlo funcionar?
En Firefox me funciona perfectamente.
Gracias
no puedo adivinar que ocurre, el programa funciona, pero no encuentro porque razon no se muestran los datos al cargar el sitio por vez primera, o filtrar por vez primera, recién se consiguen ver los datos filtrados o no si clickeamos los spans (Fecha Nacimiento/ Nombre/Emai/Pais)
pero al cargar no se muestran, o no veo que hayas diferencias con el demo, le falta algun echo al index.php? o al js.js?? si revisan mejor, saludos y gracias!
Hola, muchas gracias por el excelente post. Quisiera saber como puedo aplicarle un paginado a los resultados. He estado tratando de hacerlo pero no sale bien.
Gracias
Hola, muchas gracias por tu script, lo he implementado muy bien y funciona a la perfección. Te cuento que a partir de este, estoy haciendo una agenda, donde me divida por meses los registros en pestañas. Es decir que me aparezca la pestaña “Enero 2013″ y dentro de ella se muestren los resultados que se encuentren con su fecha en Enero 2013 y así con todos los meses (Pueden ser solo los registros existentes).
Tengo entendido que JqueryUI tiene unas Tabs, las que he trabajado con anterioridad. Pero no se cómo integrarla a este script ¿Tu me podrías dar una mano? Me imagino que la modificación debería hacerse entre el index y el js.js.
Si puedes escribirme a mi correo rsilvaldeg[at]gmail.com estaré muy agredecido. Quizás después puedes hacer una actualización de este post con las modificaciones que haga.
Saludos.
Gracias por tu aporte mi servio mucha la parte para ordenar y concatenar la consulta….