22/05/2014, 10:25
|
| | | Fecha de Ingreso: mayo-2014
Mensajes: 9
Antigüedad: 10 años, 6 meses Puntos: 0 | |
 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: 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 |