indes.php
<?php
include("conexion.php")
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Filtro en tabla mysql con ajax php & mysql</title>
<link rel="stylesheet" type="text/css" href="assets/css/style.css"/>
<style type="text/css">
/* CSS demo */
#content{
padding:20px 0 0 10px
}
#content .filtro{
overflow:hidden;
padding-bottom:15px
}
#content .filtro select{
width:100px
}
#content .filtro ul{
list-style:none;
padding:0
}
#content .filtro li{
float:left;
display:block;
margin:0 5px
}
#content .filtro li a{
color:#006;
position:relative;
top:5px;
text-decoration:underline
}
#content .filtro li label{
float:left;
padding:4px 5px 0 0
}
#content table{
border-collapse:collapse;
width:940px;
}
#content table th{
border:1px solid #999;
padding:8px;
background:#F8F8F8
}
#content table th span{
cursor:pointer;
padding-right:12px
}
#content table th span.asc{
background:url(assets/imgs/sorta.gif) no-repeat right center;
}
#content table th span.desc{
background:url(assets/imgs/sortd.gif) no-repeat right center;
}
#content table td{
border:1px solid #999;
padding:6px
}
</style>
<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>
</head>
<body>
<div id="top">
<a href="http://www.jqueryeasy.com">jQueryEasy.com demo script.</a> para obtener la demo solo dale click en <a href="">Descargar script</a>
</div>
<div id="content">
<div class="filtro">
<form id="frm_filtro" method="post" action="">
<ul>
<li><label>F.Compra: 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:</label> <input type="text" name="apellidos" size="25" /></li>
<li><label>Localidad:</label>
<select name="poblacion">
<option value="0">--</option>
<!-- Listar Poblaciones -->
<?php
$query = mysql_query("SELECT * FROM dir_usuarios");
while($row = mysql_fetch_array($query)){
?>
<option value="<?php echo $row['usuario'] ?>">
<?php echo $row['poblacion'] ?>
</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="">F.Compra</span></th>
<th width="35%"><span title="apellidos">Nombre</span></th>
<th width="30%"><span title="telefono">Teléfono</span></th>
<th><span title="poblacion">Localidad</span></th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>
</body>
</html>
-----------------------------------------------------------------------------------------------------
ajax.php
<?php
include("conexion.php");
if ($_GET["action"] == "listar")
{
// valores recibidos por POST
$vapellidos = $_POST['apellidos'];
$vpoblacion = $_POST['poblacion'];
$vUSUARIO = $_POST['USUARIO'];
$vdel = ($_POST['del'] != '' ) ? explode("/",$_POST['del']) : '';
$val = ($_POST['al'] != '' ) ? explode("/",$_POST['al']) : '';
$sql = "SELECT*
FROM usuarios pe, dir_usuarios p
WHERE pe.n
suario = p.usuario";
// Vericamos si hay algun filtro
$sql .= ($vapellidos != '') ? " AND CONCAT(apellidos) LIKE '%$vapellidos%'" : "";
$sql .= ($vpoblacion > 0) ? " AND pe.n
suario = '".$vPOBLACION."'" : "";// 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(
'n
suario' => $row['nsuario'],'nombre' => $row['nombre'],
'apellidos' => $row['apellidos'],
'poblacion' => $row['poblacion']
);
}
// convertimos el array de datos a formato json
echo json_encode($datos);
}
?>
-----------------------------------------------------------------------------------------------------
js.js
// JavaScript Document
var ordenar = '';
$(document).ready(function(){
// Llamando a la funcion de busqueda al
// cargar la pagina
filtrar()
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
$("#btncancel").click(function(){
$(".filtro input").val('')
$(".filtro select").find("option[value='0']").attr("selected",true)
filtrar()
});
// ordenar por
$("#data th span").click(function(){
var orden = '';
if($(this).hasClass("desc"))
{
$("#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()
});
});
function filtrar()
{
$.ajax({
data: $("#frm_filtro").serialize()+ordenar,
type: "POST",
dataType: "json",
url: "ajax.php?action=listar",
success: function(data){
var html = '';
if(data.length > 0){
$.each(data, function(i,item){
html += '<tr>'
html += '<td>'+item.nacimiento+'</td>'
html += '<td>'+item.apellidos+'</td>'
html += '<td>'+item.telefono+'</td>'
html += '<td>'+item.poblacion+'</td>'
html += '</tr>';
});
}
if(html == '') html = '<tr><td colspan="4" align="center">No se encontraron registros..</td></tr>'
$("#data tbody").html(html);
}
});
}
--------------------------------------------------------------------------------------------------
Tengo dos tablas llamadas:
Usuarios
n
suariotelefono
apellidos
y otra llamada
dir_usuarios
poblacion
usuario
Solo, por ahora quiero de la lista desplegable con las poblaciones pero me sale una lista con un error de la variable poblacion.
Gracias
