Foros del Web » Programando para Internet » PHP »

No muestra tabla , FILTRO AJAX Y PHP

Estas en el tema de No muestra tabla , FILTRO AJAX Y PHP en el foro de PHP en Foros del Web. Hola.. Buenos dias.. tengo un script que me filtra por codigo , y en dos select por area y usuarios , estoy usando ajax , ...
  #1 (permalink)  
Antiguo 22/05/2014, 10:25
 
Fecha de Ingreso: mayo-2014
Mensajes: 9
Antigüedad: 7 años, 6 meses
Puntos: 0
Busqueda No muestra tabla , FILTRO AJAX Y PHP

Hola..
Buenos dias..
tengo un script que me filtra por codigo , y en dos select por area y usuarios , estoy usando ajax , pero no logro que al darle click en el boton filtrar aparezca la tabla
gracias de antemano.

Código HTML:
[PHP]<?php 
include("conexion.php")
?>
<!DOCTYPE html>
<html lang="es">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Filtro </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="content">
        <div class="filtro">
        	<form id="frm_filtro" method="post" action="">
                <ul>
                    <li><label>Fecha Adquisición: &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>Codigo:</label> <input type="text" name="codigo" size="25" /></li>
                    <li><label>Usuario:</label>
                        <select name="usuarios">
                            <option value="0">--</option>
                            <!-- Listar Paises -->
                            <?php
                            $query = mysql_query("SELECT * FROM usuarios"); 
                            while($row = mysql_fetch_array($query)){
                                ?>
                                <option value="<?php echo $row['id_usuario'] ?>">
                                    <?php echo $row['nombre_usuario'] ?>
                                </option>
                                <?php
                            }
                            ?>

                        </select>                	
                    </li>
                                        <li><label>Areas:</label>
                        <select name="areas">
                            <option value="0">--</option>
                            <!-- Listar Paises -->
                            <?php
                            $query = mysql_query("SELECT * FROM areas"); 
                            while($row = mysql_fetch_array($query)){
                                ?>
                                <option value="<?php echo $row['id_area'] ?>">
                                    <?php echo $row['nombre_area'] ?>
                                </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>    
</body>
</html>[/PHP]
Código PHP:
[HTML]<?php 
include("conexion.php");

if(
$_GET['action'] == 'listar')
{
    
// valores recibidos por POST
    
$vnm   $_POST['codigo'];
    
$vusuarios $_POST['usuarios'];
    
$vareas   $_POST['areas'];
    
$vdel  = ($_POST['del'] != '' ) ? explode("/",$_POST['del']) : '';
    
$val   = ($_POST['al']  != '' ) ? explode("/",$_POST['al']) : '';
    
    
$sql "SELECT * FROM usuarios
                WHERE nombre_usuario: = id_usuario "
;    
                                        
    
// Vericamos si hay algun filtro
    
$sql .= ($vnm != '')      ? " AND hojavidaequipo where codigo='$vnm' LIKE '%$vnm%'" "";
    
$sql .= ($vusuarios 0)      ? " AND usuarios.nombre_usuario = '".$vpais."'" "";
    
$sql .= ($vdel && $val)   ? " AND hojavidaequipo.fecha 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'],
            
'codigo'      => $row['codigo'],
            
'areas'       => $row['areas'],
            
'usuarios'  => $row['usuarios'],
            
'fecha'        => $row['fecha']
        );
    }
    
// convertimos el array de datos a formato json
    
echo json_encode($datos);
}

?>[/HTML]
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.codigo+'</td>'
							html += '<td>'+item.areas+'</td>'
							html += '<td>'+item.usuarios+'</td>'
							html += '<td>'+item.fecha+'</td>'
						html += '</tr>';
															
					});					
				}
				if(html == '') html = '<tr><td colspan="4" align="center">No se encontraron registros..</td></tr>'
				$("#data tbody").html(html);
			}
	  });
}


:adios:

Última edición por dilanc9; 22/05/2014 a las 10:34
  #2 (permalink)  
Antiguo 22/05/2014, 11:45
Avatar de alexisverano  
Fecha de Ingreso: septiembre-2008
Ubicación: La Habana.Cuba
Mensajes: 298
Antigüedad: 13 años, 2 meses
Puntos: 36
Respuesta: No muestra tabla , FILTRO AJAX Y PHP

Inicialmente no tienes ningun evento asociado al boton filtrar;

tienes esto:

Código HTML:
Ver original
  1. <button type="button" id="btnfiltrar">Filtrar</button>

deberias tener algo como esto:

Código HTML:
Ver original
  1. <button type="button" id="btnfiltrar" onclick="nombre_de_tu_funcion()">Filtrar</button>
  #3 (permalink)  
Antiguo 22/05/2014, 11:47
Avatar de alexisverano  
Fecha de Ingreso: septiembre-2008
Ubicación: La Habana.Cuba
Mensajes: 298
Antigüedad: 13 años, 2 meses
Puntos: 36
Respuesta: No muestra tabla , FILTRO AJAX Y PHP

La tabla que quieres que se muestre es esta?

Código HTML:
Ver original
  1. <table cellpadding="0" cellspacing="0" id="data">
  2.             <thead>
  3.                 <tr>
  4.                     <th width="22%"><span title="nacimiento">Fecha Nacimiento</span></th>
  5.                     <th width="35%"><span title="nombre">Nombre</span></th>
  6.                     <th width="30%"><span title="email">Email</span></th>
  7.                     <th><span title="nombre_pais">Pais</span></th>
  8.                 </tr>
  9.             </thead>
  10.             <tbody>
  11.         </table>
  #4 (permalink)  
Antiguo 22/05/2014, 13:17
 
Fecha de Ingreso: mayo-2014
Mensajes: 9
Antigüedad: 7 años, 6 meses
Puntos: 0
Respuesta: No muestra tabla , FILTRO AJAX Y PHP

Cita:
Iniciado por alexisverano Ver Mensaje
La tabla que quieres que se muestre es esta?

Código HTML:
Ver original
  1. <table cellpadding="0" cellspacing="0" id="data">
  2.             <thead>
  3.                 <tr>
  4.                     <th width="22%"><span title="nacimiento">Fecha Nacimiento</span></th>
  5.                     <th width="35%"><span title="nombre">Nombre</span></th>
  6.                     <th width="30%"><span title="email">Email</span></th>
  7.                     <th><span title="nombre_pais">Pais</span></th>
  8.                 </tr>
  9.             </thead>
  10.             <tbody>
  11.         </table>
si, tome este ejemplo de esta pagina http://www.jqueryeasy.com/2012/05/19/filtrar-y-ordenar-una-tabla-mysql-con-ajax/ , quiero que muestre esta tabla

Código HTML:
<table cellpadding="0" cellspacing="0" id="data">
        	<thead>
            	<tr>
                    <th width="22%"><span title="fecha">Fecha Adquisicion</span></th>
                    <th width="35%"><span title="codigo">Codigo</span></th>
                    <th width="30%"><span title="usuarios">Usuarios</span></th>
                    <th><span title="areas">Areas</span></th>
     </tr>
            </thead> 

Etiquetas: ajax-php-mysql, mysql, mysql+consulta
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 00:39.