Sistema de ordenación de elementos con Ajax y PHP

26/6/08 - 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.

Autoría, licencia y acciones sobre este artículo

Informe de Gema María Molina Prados* Equipo DesarrolloWeb.com URL: http://www.desarrolloweb.com Atención: Copyright. Este artículo no se puede reproducir sin la autorización expresa del autor. * Para consultas técnicas utilizar la lista de correo. Versión imprimible del artículo Enviar artículo por e-mail Publicar un comentario del artículo

Comentarios sin revisar

Añadir un comentario del artículo Entre los comentarios no revisados puede haber algunos interesantes que se hayan enviado recientemente.

 Se ha encontrado un comentario sin revisar

Ver los comentarios no revisados

Añadir un comentario del artículo

Enlaces:

Maestrosdelweb

  Ir arriba