lunes, 4 de octubre de 2010

ordenar una tabla de resultados usando combobox

Vamos a suponer que tenemos una base de datos en la cual realizamos una búsqueda y mostramos los resultados en una tabla y luego queremos ordenar el resultado por un criterio específico.

En este ejemplo voy a dejar 3 archivo: el primero es un buscador sobre la base de datos de un empleado. El segundo es el archivo que muestra los resultados y presenta un combo para poder ordenar dependiendo de tres criterio: cedula, nombre o apellido. El tercer archivo es similar al segundo y permite realizar una segunda búsqueda.

Funciona de la siguiente manera: escribo el texto a buscar en el archivo "buscaempleado.php", este busca el archivo "ordenaempleado.php", el cual realiza la búsqueda y lo ordena por apellido. en "ordenaempleado.php" tengo un combo que me permite ordenar por cédula, nombre o apellido, al seleccionar uno de ellos y dar clic en ordenar llama el archivo "ordenaempleado1.php", que realiza el mismo trabajo que "ordenaempleado.php" pero esta vez lo ordena dependiendo del criterio del combo.

Para evitar errores "ordenaempleado.php" llama a "ordenaempleado1.php" y visceversa.

Sin más preámbulo acá el código de los tres archivos.

buscaempleado.php

<?php
//cadena de conexion//CONEXION MYSQL Y BASE DE DATOS
$con=mysql_connect("localhost","root","123"); //conexion a MYSQL HOST/USUARIO/PASS
$bd=mysql_select_db("cilgasproteccion");  //CONEXION a la base de datos exacta

// DEBO PREPARAR LOS TEXTOS QUE VOY A BUSCAR si la cadena existe
$busqueda=$_POST["busqueda"]; #trae el dato del archivo FormbuscaEmpleado

//busca los datos y los ordena por apellido
$sql="SELECT * FROM empleado WHERE cedula LIKE '%".$busqueda."%' OR  nombre LIKE '%".$busqueda."%' OR apellido1 LIKE '%".$busqueda."%' OR apellido2 LIKE '%".$busqueda."%' order by apellido1";

$res=mysql_query($sql,$con); //almacena la consulta en una variable que luego se usa para verificar el resultado

?>
<html>
<head>
<title>Lista de Empleados</title>
<style type="text/css">
<!--
.Estilo1 {
font-size: 36px;
font-weight: bold;
color: #669900;
}
.Estilo2 {font-size: 36px; font-weight: bold; color: #0000CC; }
.Estilo3 {
font-size: 18px;
font-weight: bold;
color: #0000CC;
}
.Estilo5 {font-size: 18px; font-weight: bold; color: #669900; }
.Estilo6 {font-size: 24px}
-->
</style>
<style type="text/css">
.encabezado{ background-color:#666666; color:#FFFFFF; font-weight:bold}
.registros{ background-color:#f0f0f0}
</style>
<script language="javascript" type="text/javascript">
function eliminar(cedula)
{
if (confirm("Realmente desea eliminar el registro?"))
{
window.location="eliminarempleado.php?cedula="+cedula;
}
}
</script>
</head>
<body>
<table width="715" border="0" cellpadding="0" cellspacing="0" align="center">
  <!--DWLayoutTable-->
  <tr>
    <td width="715" height="124" valign="top"><table width="100%" border="0" cellpadding="0" cellspacing="0">
      <!--DWLayoutTable-->
      <tr>
        <td width="217" height="124" valign="top"><table width="100%" border="0" cellpadding="0" cellspacing="0">
          <!--DWLayoutTable-->
          <tr>
            <td width="217" height="124" valign="top" align="center"><img src="imagenes/logo.jpg" width="178" height="106"></td>
          </tr>
        </table>        </td>
        <td width="498" valign="top" ><p align="center" class="Estilo2">Control </p>
          <p align="center" class="Estilo1">Material de Proteccion </p></td>
      </tr>
  <tr align="center">
        <td width="498" valign="top" align="right" colspan="2">
<p align="right" class="Estilo2">Resultados de la Búsqueda</p>
        </td>
<td height="50">
</td>
    </tr>
<tr>
<table align="center"> <!-- Esta tabla pretende mostar un combo que permita ordenar el resultado -->
<tr>
<td width="100" valign="middle"><h3>Ordenar por</h3></td>
<td align="left">
<form name="orden" method="get" action="ordenaempleado.php">
<select name="ordena">
<option value="cedula" onClick="ordenaempleado.php">Cedula</option>
<option value="nombre" onClick="ordenaempleado.php">Nombre</option>
<option value="apellido1" onClick="ordenaempleado.php">Apellido</option>
</select>
<input type="submit" name="ordenar" value="Ordenar">
<input type="hidden" name="bus" value="<?php echo $busqueda ?>">
</form>
</tr>
</table>
</tr>
</table>

<table align="center" border="1">
<?php
if (mysql_num_rows($res)==0) //si mysql_num_rows es igual a cero es porque no hubo resultado de la consulta
{
?>
<tr>
<td colspan="3"> <!-- Muestra el mensaje dinámico al no encontrar resultados -->
   <div align="center">No se encontraron datos referentes a <b> <?php echo $busqueda; ?> </b> </div>
</td>
</tr>
<?php
}else{ //hace referencia a cuando mysql_num_rows es diferente de cero, es decir, si se encontró algún resultado
?> <!-- Muestra las cabeceras de la tabla de resultados -->
<tr>
<td width="80" align="center"> <b> Cédula </b> </td>
<td width="150" align="center"> <b> Nombres </b> </td>
<td width="150" align="center"> <b> Apellidos </b> </td>
</tr>
<?php
while ($reg=mysql_fetch_array($res))
{
?>
<tr> <!-- Muestra dinámicamente los resultados -->
<td width="100"> <?php echo $reg["cedula"] ?> </td>
<td width="200"> <?php echo $reg["nombre"] ?> </td>
<td width="200"> <?php echo "".$reg["apellido1"]." ".$reg["apellido2"]."" ?> </td>
</tr>
<?php
} //cierre while de mysql_fetch_array
} //cierre else que verifica si existe algún dato
?>
</table>

<style type="text/css">
<!--
.Estilo2 {
font-size: 24px;
color: #66CC00;
font-weight: bold;
}
.Estilo3 {color: #000099}
.Estilo4 {
color: #003ACE;
font-weight: bold;
}
.Estilo5 {
color: #663ACE;
font-weight: bold;
}
.Estilo6 {font-size: 10px}
-->
</style>

<center>
<a href="index.html" title="Regresar"><img src="ima/regresar.png" width="88" height="31" border="0"></a>
<a href="FormbuscaEmpleado.php" title="Buscar de Nuevo"><img src="ima/LUPAS.png" height="40" width="35" border="0"></a>
</center>
</body>
</html>


ordenaempleado.php

<?php
//cadena de conexion//CONEXION MYSQL Y BASE DE DATOS
$con=mysql_connect("localhost","root","123"); //conexion a MYSQL HOST/USUARIO/PASS
$bd=mysql_select_db("cilgasproteccion");  //CONEXION a la base de datos exacta

//busca los datos y los ordena por el criterio del combo
$sql="SELECT * FROM empleado WHERE cedula LIKE '%".$_GET["bus"]."%' OR  nombre LIKE '%".$_GET["bus"]."%' OR apellido1 LIKE '%".$_GET["bus"]."%' OR apellido2 LIKE '%".$_GET["bus"]."%' order by ".$_GET["ordena"]."";

$res=mysql_query($sql,$con); //almacena la consulta en una variable que luego se usa para verificar el resultado

?>
<html>
<head>
<title>Lista de Empleados</title>
<style type="text/css">
<!--
.Estilo1 {
font-size: 36px;
font-weight: bold;
color: #669900;
}
.Estilo2 {font-size: 36px; font-weight: bold; color: #0000CC; }
.Estilo3 {
font-size: 18px;
font-weight: bold;
color: #0000CC;
}
.Estilo5 {font-size: 18px; font-weight: bold; color: #669900; }
.Estilo6 {font-size: 24px}
-->
</style>

<style type="text/css">
.encabezado{ background-color:#666666; color:#FFFFFF; font-weight:bold}
.registros{ background-color:#f0f0f0}
</style>
<script language="javascript" type="text/javascript">
function eliminar(cedula)
{
if (confirm("Realmente desea eliminar el registro?"))
{
window.location="eliminarempleado.php?cedula="+cedula;
}
}
</script>

</head>

<body>
<table width="715" border="0" cellpadding="0" cellspacing="0" align="center">
  <!--DWLayoutTable-->
  <tr>
    <td width="715" height="124" valign="top"><table width="100%" border="0" cellpadding="0" cellspacing="0">
      <!--DWLayoutTable-->
      <tr>
        <td width="217" height="124" valign="top"><table width="100%" border="0" cellpadding="0" cellspacing="0">
          <!--DWLayoutTable-->
          <tr>
            <td width="217" height="124" valign="top" align="center"><img src="imagenes/logo.jpg" width="178" height="106"></td>
          </tr>
        </table>        </td>
        <td width="498" valign="top" ><p align="center" class="Estilo2">Control </p>
          <p align="center" class="Estilo1">Material de Proteccion </p></td>
      </tr>
  <tr align="center">
        <td width="498" valign="top" align="right" colspan="2">
<p align="right" class="Estilo2">Resultados de la Búsqueda</p>
        </td>
<td height="50">
</td>
    </tr>
<tr>
<table align="center"> <!-- Esta tabla pretende mostar un combo que permita ordenar el resultado -->
<tr>
<td width="100" valign="middle"><h3>Ordenar por</h3></td>
<td align="left">
<form name="orden" method="get" action="ordenaempleado1.php">
<select name="ordena">
<option value="cedula" onClick="ordenaempleado.php">Cedula</option>
<option value="nombre" onClick="ordenaempleado.php">Nombre</option>
<option value="apellido1" onClick="ordenaempleado.php">Apellido</option>
</select>
<input type="submit" name="ordenar" value="Ordenar">
<input type="hidden" name="bus1" value="<?php echo $bus ?>">
</form>
</tr>
</table>
</tr>
</table>

<table align="center" border="1">
<?php
if (mysql_num_rows($res)==0) //si mysql_num_rows es igual a cero es porque no hubo resultado de la consulta
{
?>
<tr>
<td colspan="3"> <!-- Muestra el mensaje dinámico al no encontrar resultados -->
   <div align="center">No se encontraron datos referentes a <b> <?php echo $busqueda; ?> </b> </div>
</td>
</tr>
<?php
}else{ //hace referencia a cuando mysql_num_rows es diferente de cero, es decir, si se encontró algún resultado
?> <!-- Muestra las cabeceras de la tabla de resultados -->
<tr>
<td width="80" align="center"> <b> Cédula </b> </td>
<td width="150" align="center"> <b> Nombres </b> </td>
<td width="150" align="center"> <b> Apellidos </b> </td>
</tr>
<?php
while ($reg=mysql_fetch_array($res))
{
?>
<tr> <!-- Muestra dinámicamente los resultados -->
<td width="100"> <?php echo $reg["cedula"] ?> </td>
<td width="200"> <?php echo $reg["nombre"] ?> </td>
<td width="200"> <?php echo "".$reg["apellido1"]." ".$reg["apellido2"]."" ?> </td>
</tr>
<?php
} //cierre while de mysql_fetch_array
} //cierre else que verifica si existe algún dato
?>
</table>

<style type="text/css">
<!--
.Estilo2 {
font-size: 24px;
color: #66CC00;
font-weight: bold;
}
.Estilo3 {color: #000099}
.Estilo4 {
color: #003ACE;
font-weight: bold;
}
.Estilo5 {
color: #663ACE;
font-weight: bold;
}
.Estilo6 {font-size: 10px}
-->
</style>
<center>
<a href="index.html" title="Regresar"><img src="ima/regresar.png" width="88" height="31" border="0"></a>
<a href="FormbuscaEmpleado.php" title="Buscar de Nuevo"><img src="ima/LUPAS.png" height="40" width="35" border="0"></a>
</center>
</body>
</html>


ordenaempleado1.php

<?php
//cadena de conexion//CONEXION MYSQL Y BASE DE DATOS
$con=mysql_connect("localhost","root","123"); //conexion a MYSQL HOST/USUARIO/PASS

$bd=mysql_select_db("cilgasproteccion");  //CONEXION a la base de datos exacta

$bus=$_GET["bus1"]; //obtiene la variable del archivo ordenaempleado.php con el dato de busqueda traido de buscaempleado.php

//busca los datos y los ordena el criterio del combo llamado ordena
$sql="SELECT * FROM empleado WHERE cedula LIKE '%".$_GET["bus1"]."%' OR  nombre LIKE '%".$_GET["bus1"]."%' OR apellido1 LIKE '%".$_GET["bus1"]."%' OR apellido2 LIKE '%".$_GET["bus1"]."%' order by ".$_GET["ordena"]."";

$res=mysql_query($sql,$con); //almacena la consulta en una variable que luego se usa para verificar el resultado
?>
<!--
Este archivo permite ordenar el resultado luego de elegir una opción en el archivo ordenaempleado.php
-->
<html>
<head>
<title>Lista de Empleados</title>
<style type="text/css">
<!--
.Estilo1 {
font-size: 36px;
font-weight: bold;
color: #669900;
}
.Estilo2 {font-size: 36px; font-weight: bold; color: #0000CC; }
.Estilo3 {
font-size: 18px;
font-weight: bold;
color: #0000CC;
}
.Estilo5 {font-size: 18px; font-weight: bold; color: #669900; }
.Estilo6 {font-size: 24px}
-->
</style>
<style type="text/css">
.encabezado{ background-color:#666666; color:#FFFFFF; font-weight:bold}
.registros{ background-color:#f0f0f0}
</style>
<script language="javascript" type="text/javascript">
function eliminar(cedula)
{
if (confirm("Realmente desea eliminar el registro?"))
{
  window.location="eliminarempleado.php?cedula="+cedula;
}
}
</script>
</head>
<body>
<table width="715" border="0" cellpadding="0" cellspacing="0" align="center">
<!--DWLayoutTable-->
<tr>
    <td width="715" height="124" valign="top"><table width="100%" border="0" cellpadding="0" cellspacing="0">
     <!--DWLayoutTable-->
     <tr>
       <td width="217" height="124" valign="top"><table width="100%" border="0" cellpadding="0" cellspacing="0">
         <!--DWLayoutTable-->
         <tr>
           <td width="217" height="124" valign="top" align="center"><img src="imagenes/logo.jpg" width="178" height="106"></td>
         </tr>
       </table>        </td>
       <td width="498" valign="top" ><p align="center" class="Estilo2">Control </p>
         <p align="center" class="Estilo1">Material de Proteccion </p></td>
     </tr>
  <tr align="center">
       <td width="498" valign="top" align="right" colspan="2">
  <p align="right" class="Estilo2">Resultados de la Búsqueda</p>
       </td>
<td height="50">
</td>
    </tr>
<tr>
<table align="center"> <!-- Esta tabla pretende mostar un combo que permita ordenar el resultado -->
<tr>
<td width="100" valign="middle"><h3>Ordenar por</h3></td>
<td align="left">
  <form name="orden" method="get" action="ordenaempleado.php">
   <select name="ordena" title="Seleccione el criterio por el que desea ordenar">
    <option value="cedula" onClick="ordenaempleado.php">Cedula</option>
    <option value="nombre" onClick="ordenaempleado.php">Nombre</option>
    <option value="apellido1" onClick="ordenaempleado.php">Apellido</option>
   </select>
   <input type="submit" name="ordenar" value="Ordenar" title="Clic para ordenar">
   <input type="hidden" name="bus" value="<?php echo $bus1 ?>"> <!-- envia la variable bus nuevamente a ordenaempleado.php -->
  </form>
  </tr>
</table>
</tr>
</table>
<table align="center" border="1">
<?php
if (mysql_num_rows($res)==0) //si mysql_num_rows es igual a cero es porque no hubo resultado de la consulta
{
?>
<tr>
<td colspan="3"> <!-- Muestra el mensaje dinámico al no encontrar resultados -->
    <div align="center">No se encontraron datos referentes a <b> <?php echo $busqueda; ?> </b> </div>
</td>
</tr>
<?php
}else{ //hace referencia a cuando mysql_num_rows es diferente de cero, es decir, si se encontró algún resultado
?> <!-- Muestra las cabeceras de la tabla de resultados -->
<tr>
<td width="80" align="center"> <b> Cédula </b> </td>
<td width="150" align="center"> <b> Nombres </b> </td>
<td width="150" align="center"> <b> Apellidos </b> </td>
</tr>
<?php
while ($reg=mysql_fetch_array($res))
{
?>
<tr> <!-- Muestra dinámicamente los resultados -->
<td width="100"> <?php echo $reg["cedula"] ?> </td>
<td width="200"> <?php echo $reg["nombre"] ?> </td>
<td width="200"> <?php echo "".$reg["apellido1"]." ".$reg["apellido2"]."" ?> </td>
</tr>
<?php
} //cierre while de mysql_fetch_array
} //cierre else que verifica si existe algún dato
?>
</table>
<style type="text/css">
<!--
.Estilo2 {
font-size: 24px;
color: #66CC00;
font-weight: bold;
}
.Estilo3 {color: #000099}
.Estilo4 {
color: #003ACE;
font-weight: bold;
}
.Estilo5 {
color: #663ACE;
font-weight: bold;
}
.Estilo6 {font-size: 10px}
-->
</style>
<center>
<a href="index.html" title="Regresar"><img src="ima/regresar.png" width="88" height="31" border="0"></a>
<a href="FormbuscaEmpleado.php" title="Buscar de Nuevo"><img src="ima/LUPAS.png" height="40" width="35" border="0"></a>
</center>
</body>
</html>


0 comentarios:

Publicar un comentario