Ordenar registros de una tabla con PHP y Ajax

Publicado el 01⋅Marzo⋅2007 en Tutoriales, AJAX, Programación
40 Comentarios • RSS • 30609 hits

Ordenar por columna 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.

Menu contextual con Javascript

Juegos con Ajax, desarrollados con YUI

Comentarios

↑ Asc. ‹ 1 2 3 4 ›

jesusvld 2010-01-05 14:53:22 40 @Hector Carrillo:

Hola! no logre hacer el tutorial. Sera motivo para realizarlo con jQuery :)
Hector Carrillo 2010-01-05 13:43:04 39 Hola, se que ya es algo viejo este post pero... a final d ela pagina dice que combinarias este script con la paginacion que es lo que justamente estoy buscando, desconosco si la creaste, podrias darme el link?, saludos
Karina 2009-12-25 13:41:12 38 Yo trate de hacer esto pero no me funciona. 3 archivos:
archivo 1 - formulario.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>Documento sin título</title>
</head>
<body>
<form id="form1" name="form1" method="post" action="Consulta2.php">
<table width="50%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="38%">NOMBRE</td>
<td width="62%"><label>
<input type="text" name="nombre" id="nombre" />
</label></td>
</tr>
<tr>
<td>EMAIL</td>
<td><label>
<input type="text" name="email" id="email" />
</label></td>
</tr>
<tr>
<td colspan="2" align="center"><label>
<input type="submit" name="enviar" id="enviar" value=" Enviar " />
</label></td>
</tr>
</table>
</form>
</body>
</html>
***********************
archivo 2 - Consulta2.php
<?php
$nombre=$_POST['nombre'];
$email=$_POST['email'];

if ($nombre !="" && $email !="")
{
mysql_connect("localhost","root","") or die("hubo un error al conectar al servidor de BD!.");
mysql_select_db("caricaturas");
mysql_query("INSERT INTO tabla( nombre, email ) VALUES ('$nombre', '$email')");
}

?>
<table width="50%" border="2" cellpadding="0" cellspacing="0" bordercolor="#CC666">
<tr>
<td width="12%" align="center"><a href="orden.php?orden=id">CODIGO</a></td>
<td width="18%" align="center"><a href="orden.php?orden=nombre">NOMBRE</a></td>
<td width="23%" align="center"><a href="orden.php?orden=email">EMAIL</a></td>
</tr>
<tr>
<td colspan="3"><?php
mysql_connect('localhost','root','');
mysql_select_db('caricaturas');
$resultado=mysql_query('select * from tabla');
while($fila=mysql_fetch_array($resultado)){
$i=$fila['id'];
echo '<tr>';
echo '<td>'.$fila['id'].'</td>'
;
echo '<td>'.$fila['nombre'].'</td>'
;
echo '<td>'.$fila['email'].'</td>'
;

echo'</tr>';

}

?>
</td>
</tr>
</table>
<p><a href="http://localhost/Mis%20Trabajos/formulario.php">Volver</a></p>
*********************************
y archio 3 - orden.php
<?php

if($_GET['orden']='id'){

$resultado=mysql_query('select * from tabla order by id');
while($fila=mysql_fetch_array($resultado)){
$i=$fila['id'];
echo '<tr>';
echo '<td>'.$fila['id'].'</td>'
;
echo '<td>'.$fila['nombre'].'</td>'
;
echo '<td>'.$fila['email'].'</td>'
;

echo'</tr>';
}

?>
<p><a href="http://localhost/Mis%20Trabajos/formulario.php">Volver</a></p>

<?php
if($_GET['orden']='nombre'){

$resultado=mysql_query('select * from tabla order by nombre');
while($fila=mysql_fetch_array($resultado)){
$i=$fila['id'];
echo '<tr>';
echo '<td>'.$fila['id'].'</td>'
;
echo '<td>'.$fila['nombre'].'</td>'
;
echo '<td>'.$fila['email'].'</td>'
;

echo'</tr>';
}

?>
<p><a href="http://localhost/Mis%20Trabajos/formulario.php">Volver</a></p>

<?php
if($_GET['orden']='email'){
$resultado=mysql_query('select * from tabla order by email');
while($fila=mysql_fetch_array($resultado)){
$i=$fila['id'];
echo '<tr>'
;
echo '<td>'.$fila['id'].'</td>'
;
echo '<td>'.$fila['nombre'].'</td>'
;
echo '<td>'.$fila['email'].'</td>'
;

echo'</tr>'
;
}
?>
Manolo 2009-12-23 00:06:00 37 No es SQL de Microsoft SE REFIEREN a mySQL. el asunto es que NO se utilice javascript. solo PHP y MySQL.
TAMBIEN SE LOS AGRADECERÍA
Jorge Vargas 2009-12-23 00:02:13 36 Yo tambien desearía saber como lo puedo hacer con PHP y MySQL. sin utilizar ajax. es lo que andaba buscando pero PHP y MySQL.
pensaba que los encabezados podrian ser botones y que al presionarlos me ordenara por el campo que escogi. el asunto es como almaceno esas variables y despues le digo al MySQL por medio de PHP "select order by columna_2". despues si presiono el encabezado de la columna 5 (por ejemplo) me lo ordene por esa columna. es le mismo ejemplo pero sin Ajax. GRACIAS POR LA PACIENCIA.
Malleco 2009-12-22 23:54:44 35 el SQL es lo mismo que sale en este ejemplo. no se si es de MSoft. pero el mismo ejemplo lo deseo hacer en PHP y MySQL.Trate de hacer esto pero no me resulto. esta es la pagina ordenar.php que hice a la que estaba antes. SE LOS agradeceria saber como lo puedo hacer. no manejo AJAX. Gracias. esto es:
<?php
$o=$_POST['opc'];
mysql_connect('localhost','root','');
mysql_select_db('genial');
mysql_query("SELECT * FROM usuarios order by $p");
header("Location: Consulta.php");
while($fila=mysql_fetch_array($resultado)){
$i=$fila['codigo'];
echo '<tr>';
echo '<td>'.$fila['codigo'].'</td>'
;
echo '<td>'.$fila['Nombre'].'</td>'
;
echo '<td>'.$fila['Apellido'].'</td>'
;
echo '<td>'.$fila['Edad'].'</td>'
;
echo '<td>'.$fila['Correo'].'</td>'
;
// echo'<form codigo="form1" name="form1" method="post" action="ordenar.php">';
// echo'<td><input type="submit" name="Submit" value="eliminar" /></td>';
// echo'<input type="hidden" name="opc" value="'.$i.'" />';
// echo' </form>';
echo'</tr>';

}

?>
</td>
</tr>
</table>
jesusvld 2009-12-22 08:36:39 34 Para SQL? Se refieren a SQL Server de Microsoft supongo.

Voy a averiguar y les damos un ejemplos luego de ser posible.

Saludos
Malleco 2009-12-21 22:31:17 33 trate de hacer esto en php. Como hago para que me ordene por campo la pagina 2.php?

<table width="50%" border="2" cellpadding="0" cellspacing="0" bordercolor="#CC666">
<tr>
<td width="12%" align="center"><form name="form1" method="post" action="ordenar.php">
<input type="submit" name="codigo" id="codigo" value=" Código ">
</form></td>
<td width="18%" align="center"><form name="form2" method="post" action="ordenar.php">
<label>
<input type="submit" name="Nombre" id="nombre" value=" Nombre ">
</label>
</form></td>
<td width="23%" align="center"><form name="form3" method="post" action="ordenar.php">
<label>
<input type="submit" name="Apellido" id="apellido" value=" Apellido ">
</label>
</form></td>
<td width="19%" align="center"><form name="form4" method="post" action="ordenar.php">
<label>
<input type="submit" name="Edad" id="edad" value=" Edad ">
</label>
</form></td>
<td width="28%" align="center"><form name="form5" method="post" action="ordenar.php">
<label>
<input type="submit" name="Correo" id="correo" value=" e-mail ">
</label>
</form></td>
</tr>
<tr>
<td colspan="5"><?php
mysql_connect('localhost','root','');
mysql_select_db('genial');
$resultado=mysql_query('select * from usuarios ');
while($fila=mysql_fetch_array($resultado)){
$i=$fila['codigo'];
echo '<tr>';
echo '<td>'.$fila['codigo'].'</td>'
;
echo '<td>'.$fila['Nombre'].'</td>'
;
echo '<td>'.$fila['Apellido'].'</td>'
;
echo '<td>'.$fila['Edad'].'</td>'
;
echo '<td>'.$fila['Correo'].'</td>'
;
echo'</tr>';

}

?>
</td>
</tr>
</table>
Marcelo Boudon 2009-12-21 22:28:33 32 YO TAMBIEN DESEO HACERLO PERO EN PHP Y SQL.
ALGUIEN SABE DE UN TUTORIAL?
JORGE VARGAS 2009-12-21 22:26:52 31 como puedo hacer esto mismo con PHP y SQL?

Alguien conoce como lo podria hacer en PHP y SQL?