Index.php
Código 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{
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
}
#boton{
}
</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>
<script src="SpryAssets/SpryTabbedPanels.js" type="text/javascript"></script>
<link href="SpryAssets/SpryTabbedPanels.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="top">
Consulta de Intervenciones
</div>
<div id="content">
<div class="filtro">
<form id="frm_filtro" method="post" action="">
<table width="771">
<tr>
<td width="9%" class="campo_apellidos2">Teléfonos</td>
<td width="7%"><input name="telefono" type="text" size="9" /></td>
<td width="7%"><input name="telefono2" type="text" id="telefono2" size="9" /></td>
<td width="13%"><input name="telefono3" type="text" id="telefono3" size="9" /></td>
<td width="22%"> </td>
<td width="16%" class="campo_apellidos2">NIF</td>
<td width="26%"><input name="NIF" type="text" id="NIF" size="9" /></td>
</tr>
<tr>
<td class="campo_apellidos2">Nombre</td>
<td colspan="4"><input name="nombre_apellidos" type="text" size="45" />
<td> </td>
<td> </td>
</tr>
<tr>
<td class="campo_apellidos2">Localidad</td>
<td colspan="4"><input name="poblacion" type="text" size="40" />
<span class="campo_apellidos2">C.Postal</span> <input name="cod_postal" type="text" id="cod_postal" size="5" /></td>
<td class="campo_apellidos2">Provincia</td>
<td><input name="provincia" type="text" size="9" /></td>
</tr>
<tr>
<td class="campo_apellidos2">Calle</td>
<td colspan="4"><input name="calle" type="text" id="calle" size="45" />
<span class="campo_apellidos2">Nº</span> <input name="numero" type="text" id="numero" size="5" /></td>
<td class="campo_apellidos2">Edificio</td>
<td><input name="edificio" type="text" id="edificio" size="5" /></td>
</tr>
<tr>
<td class="campo_apellidos2">Puerta</td>
<td colspan="3"><input name="puerta" type="text" id="puerta" size="5" />
<span class="campo_apellidos2"> Piso</span>
<input name="piso" type="text" id="piso" size="5" />
<span class="campo_apellidos2">Letra</span> <input name="letra" type="text" id="letra" size="5" /></td>
<td> </td>
<td><span class="campo_apellidos2">Nº Cont.Mante.</span></td>
<td><input name="mantenimiento" type="text" id="mantenimiento" size="5" /></td>
</tr>
</table>
<table width="100%">
<tr>
<th scope="col"><button type="button" id="btnfiltrar" style="border:0; margin:0; padding:0;"><img src="imagenes_menu/boton_buscar.jpg" width="100%"/></button></th>
</tr>
</table>
</form>
</div>
<div id="TabbedPanels1" class="TabbedPanels">
<ul class="TabbedPanelsTabGroup">
<li class="TabbedPanelsTab" tabindex="0">Usuarios</li>
<li class="TabbedPanelsTab" tabindex="0">Aparatos</li>
</ul>
<div class="TabbedPanelsContentGroup">
<div class="TabbedPanelsContent"><table cellpadding="0" cellspacing="0" id="data">
<thead>
<tr>
<th width="22%"><span title="nu_usuario">Nº Usuario</span></th>
<th width="22%"><span title="telefono">Nº Teléfono</span></th>
<th width="35%"><span title="nombre">Nombre</span></th>
<th><span title="poblacion">Localidad</span></th>
</tr>
</thead>
<tbody>
</tbody>
</table></div>
<div class="TabbedPanelsContent"><table cellpadding="0" cellspacing="0" id="data1">
<thead>
<tr>
<th><span title="aparato">Aparato</span></th>
<th><span title="marca">Marca</span></th>
<th><span title="modelo">Modelo</span></th>
<th><span title="NUM_SERIE">Nº Serie</span></th>
<th><span title="num_PRODUCTO">COD/12NC</span></th>
<th><span title="FECHA_compra">F.Compra</span></th>
</tr>
</thead>
<tbody>
</tbody>
</table></div>
</div>
</div>
</div>
<script type="text/javascript">
var TabbedPanels1 = new Spry.Widget.TabbedPanels("TabbedPanels1");
</script>
</body>
</html>
js.js
Código PHP:
// 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_usuario+'</td>'
html += '<td>'+item.telefono+'</td>'
html += '<td>'+item.nombre+' '+item.apellidos+'</td>'
html += '<td>'+item.poblacion+'</td>'
html += '<td>'+item.aparato+'</td>'
html += '<td>'+item.marca+'</td>'
html += '<td>'+item.modelo+'</td>'
html += '<td>'+item.num_serie+'</td>'
html += '<td>'+item.num_producto+'</td>'
html += '<td>'+item.fecha_compra+'</td>'
html += '</tr>';
});
}
if(html == '') html = '<tr><td colspan="4" align="center">No se encontraron registros..</td></tr>'
$("#data tbody").html(html);
}
});
}
