Tema: No me lista
Ver Mensaje Individual
  #5 (permalink)  
Antiguo 12/09/2012, 01:18
Avatar de satjaen
satjaen
 
Fecha de Ingreso: septiembre-2012
Ubicación: Jaén (Andalucía)
Mensajes: 893
Antigüedad: 11 años, 8 meses
Puntos: 10
Muchas gracias por vuestra atencion pero no filtra los datos.

Cita:
index.php
Código 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: &nbsp;&nbsp; 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>
Cita:
ajax.php
Código 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.nu_usuario = p.usuario
 "
;     
                                        
    
// Vericamos si hay algun filtro
    
$sql .= ($vapellidos != '')      ? " AND CONCAT(apellidos) LIKE '%$vapellidos%'" "";
    
$sql .= ($vpoblacion 0)      ? " AND pe.nu_usuario = '".$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(
            
'nu_usuario'          => $row['nu_usuario'],
            
'nombre'      => $row['nombre'],
            
'apellidos'       => $row['apellidos'],
            
'poblacion'        => $row['poblacion']
        );
    }
    
// convertimos el array de datos a formato json
    
echo json_encode($datos);
}

?>



Cita:
js.js
Código:
/ 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.nu_usario+'</td>'
							html += '<td>'+item.nombre+'</td>'
							html += '<td>'+item.apellidos+'</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);
			}
	  });
}
Código:
Tengo dos tablas:
Usuarios

NU_USUARIO 	int(11) 	No  	  	  	 
NOMBRE 	char(45) 	No  	  	  	 
APELLIDOS 	char(100) 	No  	  	  	 
NIF 	varchar(20) 	No  	  	  	 
TELEFONO 	char(15) 	No  	  	  	 
TELEFONO2 	char(15) 	No  	  	  	 
TELEFONO3 	char(15) 	No
Código:
dir_usuarios


INDICE 	int(11) 	No  	  	  	 
USUARIO 	int(11) 	No  	  	  	 
NUM_DIR 	smallint(6) 	No  	  	  	 
CALLE 	char(30) 	No  	  	  	 
NUMERO 	char(10) 	No  	  	  	 
EDIFICIO 	char(20) 	No  	  	  	 
PUERTA 	char(10) 	No  	  	  	 
PISO 	char(5) 	No  	  	  	 
LETRA 	char(5) 	No  	  	  	 
POBLACION 	varchar(30) 	No  	  	  	 
PROVINCIA 	varchar(25) 	No  	  	  	 
COD_POSTAL 	varchar(12) 	No  	  	  	 
OBS_DIRECCION 	char(80) 	No  	  	  	 
PAIS 	varchar(20) 	No  	  	  	 
CODIGO_SAT 	char(15) 	No