RibosoMatic Blog

En esta oportunidad realizaremos una pequeña aplicación que consistirá en ordenar los valores de una consulta de datos (MySQL) mediante hacer clic en el encabezado de la columna. Lo que vamos hacer es relativamente sencillo. Veamos.

Una idea general

Tenemos una tabla con n registros, realizamos la consulta y mediante un script en PHP nos muestra los datos en una página web. Ahora queremos agregarle funcionalidad mediante Ajax. Queremos ordenar los datos obtenidos mediante hacer clic en encabezado de cada columna. Nota: Hay que tener en cuenta que si haces clic en el encabezado de la columna, y ésta ya está ordenada descendentemente, entonces lo lógico es que sea ordenada ascendetemente, y viceversa.

[Ver Ejemplo]

Empezemos

Trabajaremos con una tabla que contiene datos de empleados como su nombre, area donde trabaja y sueldo. [Ver tabla]

Realizaremos un script que tenga los datos de la conexión a nuestra base de datos MySQL. (Estos valores deberás cambiarlos si deseas probar el ejemplo en tu servidor local)

conexion.php

<?php
 //Configuracion de la conexion a base de datos
 $bd_host = "localhost"; 
 $bd_usuario = "root"; 
 $bd_password = "mipassword"; 
 $bd_base = "ribosomatic"; 
 $con = mysql_connect($bd_host, $bd_usuario, $bd_password); 
 mysql_select_db($bd_base, $con); 
?>

Creamos un archivo Javascript que contendrá dos funciones: 1) una función para crear el objeto XMLHttpRequest independientemente del navegador que uses y 2) una función que recibirá dos parametros: el campo por el cual ordenaremos la consulta SQL y el orden (ASC o DESC) . Veamos a detalle este archivo.

ajax.js

function Ajax(){
 var xmlhttp=false;
 try{
  xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
 }catch(e){
  try {
   xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
  }catch(E){
    xmlhttp = false;
  }
 }
 if (!xmlhttp && typeof XMLHttpRequest!='undefined') {
  xmlhttp = new XMLHttpRequest();
 }
 return xmlhttp;
}
function OrdenarPor(campo, orden){
 //especificamos el div donde se mostrará el resultado
 divListado = document.getElementById('listado');

 ajax=Ajax();
 //especificamos el archivo que realizará el listado
 //y enviamos las dos variables: campo y orden
 ajax.open("GET", "listado.php?campo="+campo+"&orden="+orden);
 ajax.onreadystatechange=function() {
  if (ajax.readyState==4) {
   divListado.innerHTML = ajax.responseText
  }
 }
 ajax.send(null)
}

Ahora, el archivo que contiene el proceso principal de esta aplicación. ¿Qué es lo que hace este archivo? Los procesos principales son (aunque el código tiene comentarios para cada línea) :

• Verifica que las variables campo y orden recibidas mediante el método GET tenga valores, caso contrario tendrá otros valores por defecto.
• Construimos la consulta. Tendrá esta forma: "SELECT * FROM empleado ORDER BY $campo $orden";
• Ahora creamos dos arrays: $campos, para los nombres de las columnas de la tabla Empleados y $cabeceras, para los encabezados.
• Hacemos un bucle para recorrer todos los elementos del array $campos y luego comparamos si el elemento del array coincide con la variable campo, si es así comparamos si la variable orden es ASC o DESC de esta forma determinamos el orden de la columna para una siguiente ocasión. Finalmente lo que hace el bucle es crear una fila con los nombres de las columnas y darle color a la columna que está ordenada.
• Creamos una función para darle color al resto de la columna que coincida con el campo actual.
• Finalmente, otro bucle para mostrar los datos de la consulta (punto 2).

listado.php

<?php
 //datos de la conexion a la base de datos
 require('conexion.php');
 //obtenemos valores que envió la funcion en
 //Javascript mediante el metodo GET
 if(isset($_GET['campo']) and isset($_GET['orden'])){
  $campo=$_GET['campo'];
  $orden=$_GET['orden'];
 }else{
  //por defecto
  $campo='nombres';
  $orden='ASC';
 }
 //realizamos la consulta de los empleados,
 //ordenandolos segun campo y asc o desc
 //ej. SELECT * FROM empleado ORDER BY nombres ASC
 $Consulta=mysql_query("SELECT * FROM empleado ORDER BY $campo $orden",$con);
?>
<table cellspacing="0" cellpading="0">
<tr class="encabezado">
<?php
 //definimos dos arrays uno para los nombre de los campos de la tabla y
 //para los nombres que mostraremos en vez de los de la tabla -encabezados
 $campos="nombres,departamento,sueldo";
 $cabecera="Nombre Empleado,Departamento / Area,Remuneracion";

 //los separamos mediante coma
 $cabecera=explode(",",$cabecera);
 $campos=explode(",",$campos);

 //numero de elementos en el primer array
 $nroItemsArray=count($campos);

 //iniciamos variable i=0
 $i=0;
 
 //mediante un bucle crearemos las columnas
 while($i<=$nroItemsArray-1){
  //comparamos: si la columna campo es igual al elemento 
  //actual del array 
  if($campos[$i]==$campo){
   //comparamos: si esta Descendente cambiamos a Ascendente
   //y viceversa
   if($orden=="DESC"){
    $orden="ASC";
    $flecha="arrow_down.gif";
   }else{
    $orden="DESC";
    $flecha="arrow_up.gif";
   }
   //si coinciden campo con el elemento del array
   //la cabecera tendrá un color distinto
   echo "	<td class="encabezado_selec"><a onclick="OrdenarPor('".$campos[$i]."','".$orden."')"><img src="".$flecha."" />".$cabecera[$i]."</a></td> n";
  }else{
   //caso contrario la columna no tendra color
   echo "	<td><a onclick="OrdenarPor('".$campos[$i]."','DESC')">".$cabecera[$i]."</a></td> n";
  }
  $i++;
 }
?>
</tr>
<?php
 //esta funcion permite comparar el campo actual y el nombre de 
 //la columna en la base de datos
 function estiloCampo($_campo,$_columna){
  if($_campo==$_columna){
   return " class="filas_selec"";
  }else{
   return "";
  }
 }
 //mostramos los resultados mediante la consulta de arriba
 while($MostrarFila=mysql_fetch_array($Consulta)){
  echo "<tr> n";
  echo "	<td".estiloCampo($campo,'nombres').">".$MostrarFila['nombres']."</td> n";
  echo "	<td".estiloCampo($campo,'departamento').">".$MostrarFila['departamento']."</td> n";
  echo "	<td".estiloCampo($campo,'sueldo').">".$MostrarFila['sueldo']."</td> n";
  echo "</tr> n";
 }
?>
</table>

Finalmente, el archivo index.php contendrá un etiqueta <div> cuyo atributo id será 'listado'. Dentro de ésta haremos un include del archivo listado.php.

index.php

<html>
<head>
 <title>Ordenar por Columnas</title>
 <script type="text/javascript" src="ajax.js"></script>
 <link href="estilos.css" rel="stylesheet" type="text/css"></link>
</head>
<body>
 <h1 align="center">Ordenar registros de una tabla con Ajax y PHP </h1>
 <div id="listado">
  <?php include('listado.php')?>
 </div>
</body>
</html>

Este ejemplo cuenta también con una hoja de estilos para darle color a las columnas y columnas seleccionadas. [Ver Hoja de Estilos]

[Ver Ejemplo] [Descargar]

De esta forma podemos ordenar los datos de una consulta SQL. Mas adelante combinaremos la paginación de datos y el ordenado por columna.