Sistema de ordenación de elementos con Ajax y PHP

Valoración del artículo:
Enviar un comentario
Ver comentarios del artículo (3)
Ordenador de elementos PHP: Como ordenar los registros de una tabla con funciones Ajax y PHP, usando Xajax.
Por Gema Maria Molina Prados
Publicado: 26/6/08
Atención: Contenido exclusivo de DesarrolloWeb.com. No reproducir. Copyright.
Vamos a crear un ordenador de elementos con Ajax y PHP. Esto es, un sistema para cambiar el orden de los registros de una tabla de una base de datos con funciones Xajax, una librería para hacer Ajax cómodamente en PHP. Como utilizamos Ajax, el ordenador de elementos funcionará dinámicamente, sin necesidad de que se recargue la página.

Podemos ver lo que es un ordenador de elementos viendo el ejemplo en funcionamiento en una página aparte.

A continuación veamos los pasos para la creación de este sistema de ordenación de elementos, pero antes tenemos que recalcar que este ejemplo utiliza Xajax 0.2.5 y que en el manual de Ajax para PHP con Xajax ya vimos las particularidades de esta librería, con lo que no nos vamos a detener para dar mayores explicaciones sobre Xajax.

Primero mostramos los datos de la tabla ordenados por el campo orden de la base de datos. En este caso, hemos creado unos botones para poder cambiar el orden de los elementos que queremos ordenar.

$ssql="select * from color order by orden";
$rs=mysql_query($ssql);
$cont=mysql_num_rows($rs);
$num=1;
echo 'ordenar colores<br>
<br>
';
echo '<div id="colores">';
while($fila=mysql_fetch_object($rs)){
if($fila->orden==0){
      echo'
      
      <input type="Button" name="orden" value="Bajar" onclick="xajax_aumentar('.$fila->id_color.','.$fila->orden.');">
      '.$fila->nombre_color;
   }elseif($num==$cont){
      echo
      '<input type="Button" name="orden" value="Subir" onclick="xajax_disminuir('.$fila->id_color.','.$fila->orden.');">
      
      '.$fila->nombre_color;
   }else{
      echo '
      <input type="Button" name="orden" value="Subir" onclick="xajax_disminuir('.$fila->id_color.','.$fila->orden.');">
      <input type="Button" name="orden" value="Bajar" onclick="xajax_aumentar('.$fila->id_color.','.$fila->orden.');">
      '.$fila->nombre_color;
   }
   
   echo '<br>';
   

   $num++;
}
echo '</div>';

Las funciones reciben el id del elemento que se quiere cambiar de orden y la posición que tiene actualmente, actualiza los registros de la tabla y vuelve a mostrar los elementos en el orden actualizado.

function aumentar($id_color,$orden){
   $orden_siguiente=$orden+1;
   //actualizo el registro actual
   $ssql="update color set orden=".$orden." where orden=".$orden_siguiente;
   $rs=mysql_query($ssql);
   //actualizo el registro siguiente
   $ssql="update color set orden=orden+1 where id_color=".$id_color;
   $rs=mysql_query($ssql);
   //muestro todos los registros actualizados
   $ssql="select * from color order by orden";
   $rs=mysql_query($ssql);
   $cont=mysql_num_rows($rs);
   $num=1;
   while($fila=mysql_fetch_object($rs)){
      if($fila->orden==0){
         $contenido.=' ';
         $contenido.='<input type="Button" name="orden" value="Bajar" onclick="xajax_aumentar('.$fila->id_color.','.$fila->orden.');">';
         $contenido.=$fila->nombre_color;
      }elseif($num==$cont){
         $contenido.='<input type="Button" name="orden" value="Subir" onclick="xajax_disminuir('.$fila->id_color.','.$fila->orden.');">';
         $contenido.=' ';
         $contenido.=$fila->nombre_color;
      }else{
         $contenido.='<input type="Button" name="orden" value="Subir" onclick="xajax_disminuir('.$fila->id_color.','.$fila->orden.');">';
         $contenido.='<input type="Button" name="orden" value="Bajar" onclick="xajax_aumentar('.$fila->id_color.','.$fila->orden.');">';
         $contenido.=$fila->nombre_color;
      }
      $num++;
      $contenido.='<br>';
   }
   
   $respuesta = new xajaxResponse('ISO-8859-1');
   $respuesta->addAssign("colores","innerHTML",$contenido);
   return $respuesta;
}

Lo primero que hace la función es actualizar el registro que queremos ordenar y cambia el orden del registro anterior o posterior al registro actualizado, dependiendo de si lo que queremos es aumentar o disminuir una posición. Por último muestra los registros de la tabla en el orden actualizado.
A continuación mostramos el código completo para ver cómo quedaría.

<?
require ($raiz . '../../../xajax/xajax.inc.php');
//instanciamos el objeto de la clase xajax
$xajax = new xajax();
$xajax->setCharEncoding('ISO-8859-1');
$xajax->decodeUTF8InputOn();
//conecto con la base de datos
$conn = mysql_connect("servidor","usuario","clave");
//selecciono la BBDD
mysql_select_db("bbdd",$conn);

function aumentar($id_color,$orden){
   $orden_siguiente=$orden+1;
   //actualizo el registro actual
   $ssql="update color set orden=".$orden." where orden=".$orden_siguiente;
   $rs=mysql_query($ssql);
   //actualizo el registro siguiente
   $ssql="update color set orden=orden+1 where id_color=".$id_color;
   $rs=mysql_query($ssql);
   //muestro todos los registros actualizados
   $ssql="select * from color order by orden";
   $rs=mysql_query($ssql);
   $cont=mysql_num_rows($rs);
   $num=1;
   while($fila=mysql_fetch_object($rs)){
      if($fila->orden==0){
         $contenido.=' ';
         $contenido.='<input type="Button" name="orden" value="Bajar" onclick="xajax_aumentar('.$fila->id_color.','.$fila->orden.');">';
         $contenido.=$fila->nombre_color;
      }elseif($num==$cont){
         $contenido.='<input type="Button" name="orden" value="Subir" onclick="xajax_disminuir('.$fila->id_color.','.$fila->orden.');">';
         $contenido.=' ';
         $contenido.=$fila->nombre_color;
      }else{
         $contenido.='<input type="Button" name="orden" value="Subir" onclick="xajax_disminuir('.$fila->id_color.','.$fila->orden.');">';
         $contenido.='<input type="Button" name="orden" value="Bajar" onclick="xajax_aumentar('.$fila->id_color.','.$fila->orden.');">';
         $contenido.=$fila->nombre_color;
      }
      $num++;
      $contenido.='<br>';
   }
   
   $respuesta = new xajaxResponse('ISO-8859-1');
   $respuesta->addAssign("colores","innerHTML",$contenido);
   return $respuesta;
}

//asociamos la función creada anteriormente al objeto xajax
$xajax->registerFunction("aumentar");

function disminuir($id_color,$orden){
   $orden_anterior=$orden-1;
   //actualizo el registro actual
   $ssql="update color set orden=".$orden." where orden=".$orden_anterior;
   $rs=mysql_query($ssql);
   //actualizo el registro anterior
   $ssql="update color set orden=orden-1 where id_color=".$id_color;
   $rs=mysql_query($ssql);
   //muestro los datos actualizados
   $ssql="select * from color order by orden";
   $rs=mysql_query($ssql);
   $cont=mysql_num_rows($rs);
   $num=1;
   while($fila=mysql_fetch_object($rs)){
      if($fila->orden==0){
         $contenido.=' ';
         $contenido.='<input type="Button" name="orden" value="Bajar" onclick="xajax_aumentar('.$fila->id_color.','.$fila->orden.');">';
         $contenido.=$fila->nombre_color;
      }elseif($num==$cont){
         $contenido.='<input type="Button" name="orden" value="Subir" onclick="xajax_disminuir('.$fila->id_color.','.$fila->orden.');">';
         $contenido.=' ';
         $contenido.=$fila->nombre_color;
      }else{
         $contenido.='<input type="Button" name="orden" value="Subir" onclick="xajax_disminuir('.$fila->id_color.','.$fila->orden.');">';
         $contenido.='<input type="Button" name="orden" value="Bajar" onclick="xajax_aumentar('.$fila->id_color.','.$fila->orden.');">';
         $contenido.=$fila->nombre_color;
      }
      $num++;
      $contenido.='<br>';
   }
   
   $respuesta = new xajaxResponse('ISO-8859-1');
   $respuesta->addAssign("colores","innerHTML",$contenido);
   return $respuesta;
}

//asociamos la función creada anteriormente al objeto xajax
$xajax->registerFunction("disminuir");

//El objeto xajax tiene que procesar cualquier petición
$xajax->processRequests();

//En el <head> indicamos al objeto xajax se encargue de generar el javascript necesario
$xajax->printJavascript("../../../xajax/");

$ssql="select * from color order by orden";
$rs=mysql_query($ssql);
$cont=mysql_num_rows($rs);
$num=1;
echo '<b>Ordenar colores</b><br>
<br>
';
echo '<div id="colores">';
while($fila=mysql_fetch_object($rs)){
if($fila->orden==0){
      echo'
      
      <input type="Button" name="orden" value="Bajar" onclick="xajax_aumentar('.$fila->id_color.','.$fila->orden.');">
      '.$fila->nombre_color;
   }elseif($num==$cont){
      echo
      '<input type="Button" name="orden" value="Subir" onclick="xajax_disminuir('.$fila->id_color.','.$fila->orden.');">
      
      '.$fila->nombre_color;
   }else{
      echo '
      <input type="Button" name="orden" value="Subir" onclick="xajax_disminuir('.$fila->id_color.','.$fila->orden.');">
      <input type="Button" name="orden" value="Bajar" onclick="xajax_aumentar('.$fila->id_color.','.$fila->orden.');">
      '.$fila->nombre_color;
   }
   
   echo '<br>';
   

   $num++;
}
echo '</div>';
?>

Puedes ver el ejemplo en una página aparte.

Enviar un comentario al artículo
MANUAL: Trabajo con Ajax en PHP utilizando Xajax
Mensaje de carga con ajax usando xajaxActualizar Xajax 0.2 a Xajax 0.5
Comentarios
Enviar un comentario al artículo
Fueron enviados 3 comentarios al artículo
1 comentario no revisado
2 comentarios revisados:

maxi_pu...
No funciona al subirlo al hosting
07/7/09
Tengo el script realizado y al probarlo en el localhost de mi pc funciona ok. Pero al subirlo al hosting, quiero probarlo y al presiona en un boton de subir o bajar, no realiza ningun movimiento (tampoco lo hace apretando luego F5) y en la barra de estado inferior aparece el texto "Error"

ladisla...
Codigo actualizado con el XAJAX 0.5
17/8/09
Primero hay q crear la tabla:
CREATE TABLE color
(id_color int(5) NOT NULL auto_increment,
nombre_color char(10) NOT NULL,
orden int(2) NOT NULL,
PRIMARY KEY (id_color))
TYPE=MyISAM AUTO_INCREMENT=1;

luego insertar:
INSERT INTO color (nombre_color,orden) VALUES ('Amarillo',0);
INSERT INTO color (nombre_color,orden) VALUES ('Verde',1);
INSERT INTO color (nombre_color,orden) VALUES ('Azul',2);
INSERT INTO color (nombre_color,orden) VALUES ('Rojo',3);

Y aqui el código completo actualizado al xajax 0.5 y corregido.
Solo verificar que la dirección de
require_once ('../xajax/xajax_core/xajax.inc.php');
$xajax->printJavascript("../xajax/");
sea la correcta.


<?php
//incluímos la clase ajax
require_once ('../xajax/xajax_core/xajax.inc.php');

//instanciamos el objeto de la clase xajax
$xajax = new xajax();
$xajax->setCharEncoding('ISO-8859-1');
$xajax->configure('decodeUTF8Input',true);

//conecto con la base de datos
$conn = mysql_connect("servidor","usuario","clave");
//selecciono la BBDD
mysql_select_db("bbdd",$conn);

function aumentar($id_color,$orden){
$orden_siguiente=$orden+1;
//actualizo el registro actual
$ssql="update color set orden=".$orden." where orden=".$orden_siguiente;
$rs=mysql_query($ssql);
//actualizo el registro siguiente
$ssql="update color set orden=orden+1 where id_color=".$id_color;
$rs=mysql_query($ssql);
//muestro todos los registros actualizados
$ssql="select * from color order by orden";
$rs=mysql_query($ssql);
$cont=mysql_num_rows($rs);
$num=1;

while($fila=mysql_fetch_object($rs)){
if($fila->orden==0){
$contenido='&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;';
$contenido.='<input type="Button" name="orden" value="Bajar" onclick="xajax_aumentar('.$fila->id_color.','.$fila->orden.');">';
$contenido.=$fila->nombre_color;
}elseif($num==$cont){
$contenido.='<input type="Button" name="orden" value="Subir" onclick="xajax_disminuir('.$fila->id_color.','.$fila->orden.');">';
$contenido.='&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;';
$contenido.=$fila->nombre_color;
}
else{
$contenido.='<input type="Button" name="orden" value="Subir" onclick="xajax_disminuir('.$fila->id_color.','.$fila->orden.');">';
$contenido.='<input type="Button" name="orden" value="Bajar" onclick="xajax_aumentar('.$fila->id_color.','.$fila->orden.');">';
$contenido.=$fila->nombre_color;
}
$num++;
$contenido.='<br>';
}


$respuesta = new xajaxResponse();
$respuesta->Assign("colores","innerHTML",$contenido);
return $respuesta;
}

//asociamos la función creada anteriormente al objeto xajax
$xajax->registerFunction("aumentar");

function disminuir($id_color,$orden){
$orden_anterior=$orden-1;
//actualizo el registro actual
$ssql="update color set orden=".$orden." where orden=".$orden_anterior;
$rs=mysql_query($ssql);
//actualizo el registro anterior
$ssql="update color set orden=orden-1 where id_color=".$id_color;
$rs=mysql_query($ssql);
//muestro los datos actualizados
$ssql="select * from color order by orden";
$rs=mysql_query($ssql);
$cont=mysql_num_rows($rs);
$num=1;
while($fila=mysql_fetch_object($rs)){
if($fila->orden==0){
$contenido='&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;';
$contenido.='<input type="Button" name="orden" value="Bajar" onclick="xajax_aumentar('.$fila->id_color.','.$fila->orden.');">';
$contenido.=$fila->nombre_color;
}elseif($num==$cont){
$contenido.='<input type="Button" name="orden" value="Subir" onclick="xajax_disminuir('.$fila->id_color.','.$fila->orden.');">';
$contenido.='&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;';
$contenido.=$fila->nombre_color;
}else{
$contenido.='<input type="Button" name="orden" value="Subir" onclick="xajax_disminuir('.$fila->id_color.','.$fila->orden.');">';
$contenido.='<input type="Button" name="orden" value="Bajar" onclick="xajax_aumentar('.$fila->id_color.','.$fila->orden.');">';
$contenido.=$fila->nombre_color;
}
$num++;
$contenido.='<br>';
}

$respuesta = new xajaxResponse();
$respuesta->Assign("colores","innerHTML",$contenido);
return $respuesta;
}

//asociamos la función creada anteriormente al objeto xajax
$xajax->registerFunction("disminuir");

//El objeto xajax tiene que procesar cualquier petición
$xajax->processRequest();

//En el <head> indicamos al objeto xajax se encargue de generar el javascript necesario
$xajax->printJavascript("../xajax/");

$ssql="select * from color order by orden";
$rs=mysql_query($ssql);
$cont=mysql_num_rows($rs);
$num=1;
echo '<b>Ordenar colores</b><br><br>';

echo '<div id="colores">';

while($fila=mysql_fetch_object($rs)){
if($fila->orden==0){
echo'
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<input type="Button" name="orden" value="Bajar" onclick="xajax_aumentar('.$fila->id_color.','.$fila->orden.');">
'.$fila->nombre_color;
}
elseif($num==$cont){
echo
'<input type="Button" name="orden" value="Subir" onclick="xajax_disminuir('.$fila->id_color.','.$fila->orden.');">
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
'.$fila->nombre_color;
}

else{
echo '
<input type="Button" name="orden" value="Subir" onclick="xajax_disminuir('.$fila->id_color.','.$fila->orden.');">
<input type="Button" name="orden" value="Bajar" onclick="xajax_aumentar('.$fila->id_color.','.$fila->orden.');">
'.$fila->nombre_color;
}

echo '<br>';


$num++;
}
echo '</div>';
?>
Ver comentarios pendientes de revisar
Enviar un comentario al artículo

Manuales relacionados
Trabajo con Ajax en PHP utilizando Xajax
(25 artículos)
Ver el índice del manual
Descargar el manual
Categorias relacionadas
El autor
Gema Maria Molina Prados
Equipo DesarrolloWeb.com
http://www.desarrolloweb.com/
Últimas noticias
Alojados en el grupo