Tablas movibles y ordenables

Si tenéis páginas con tablas donde se presentan multitud de datos seguro que os habréis preguntado cómo se podrían ordenar los resultados como en algunas aplicaciones de escritorio. O mejor aún colocar las columnas como mejor te vengan para visualizar mejor los datos.

Los dos scripts que os presento hacen precisamente eso de una forma muy fácil. Tan solo necesitas incluir en la cabecera de la página los scripts y añadir la definición de la clase.

Con eso tendrías una tabla como la siguiente:

Nombre	Teléfono	Fecha ingreso	Sueldo
José González	67890	12/10/2007	1500
Francisco García	67689	1/1/2006	1120
Alejandra Domínguez	67639	4/3/2004	1800

Si pinchas en una columna la tabla se ordenará de acuerdo a esta columna. Si la arrastras podrás llevarla a la posición que necesites.

Como he dicho antes tan solo debes incluir el script necesario para ordenar (sorttable.js) y el correspondiente para mover (dragtable.js). Para que funcione debes incluir este código en la cabecera:

 <script src="dragtable.js"></script>
 <script src="sorttable.js"></script>
 

Y a la tabla que queramos añadirle estas funciones le pondremos como clase draggable o sortable según nos convenga. Si, como en este ejemplo, queremos que pueda hacer las dos cosas tendremos que ponerlo de esta forma:

 <table class="draggable sortable">

Oferta de trabajo

Análisis patrocinado por Zync.es

Hace no demasiado tiempo os hablé de una agencia de viajes on-line que tenía una amplia gama de hoteles llamado Destinia. Hoy no os voy a hablar de esas ofertas, pero sí de la compañía en si.

Parece que les están yendo bien las cosas y necesitan un nuevo programador para sus oficinas en Madrid. Si eres programador, conoces PHP, vives (o no te importaría vivir) en Madrid y estás buscando trabajo te cuento lo que están buscando por si te interesa. Recuerda que si entras gracias a mi me lo podías decir (al menos para sentir que te he echado una mano).

Necesitarás ser Ingeniero Técnico, tener una experiencia demostrable de 2 años usando PHP y MySQL en algún proyecto de envergadura en Internet y, por supuesto, ya que se trata de una empresa relacionada con agentes extranjeros, deberás tener un buen nivel de inglés. No dicen nada de otros idiomas pero estoy casi seguro que te ayudará saber alguno más.

Si además has estado relacionado/a alguna vez con páginas de turismo, vuelo o sistemas de contabilidad tendrás más puntos para entrar. También te ayudará el tener conocimientos de UML, XML, Javascript, Ajax y Linux.

Ofrecen un contrato por obra a jornada completa renovable en indefinido cerca del metro Gran Vía. Si te parece interesante y pero quieres tener más información puedes acceder aquí para informarte.

Y si no te interesaba ese puesto también buscan un/a agente de viajes. Por si te gusta más la idea.

Viajes baratos

Msgbox con CSS y Ajax

Si estás haciendo una web 2.0 totalmente alucinante y para mostrar un simple mensaje al visitante optas por redirigirlo a otra página que realmente no sirve para nada, o haces uso de alguna librería muy pesada para mostrar una ventanita con Javascript o, simplemente, no te gusta demasiado cómo queda lo que tienes deberías echarle un vistazo a la librería que Andrey Okonetchnikov ha creado.

Basada en los dialogos que muestra Mac OS X presenta un cuadro con un efecto desde arriba que cada realmente bien. Pesa 28,1 Kb incluyendo la hoja de estilo y la imagen para cerrar la ventana.

El uso es muy simple. Hay que incluir el archivo de script y el css.

<script type="text/javascript" src="../js/modalbox.js"></script>
<link rel="stylesheet" href="../js/modalbox.css" type="text/css"/>

Y en el lugar que queramos que aparezca podemos hacer algo tan simple como esto:

Modalbox.show('pagina_por_ajax.html');

O un poco más elaborado:

Modalbox.show('inputBox.php',
{title:'Título',width:300,height:200,
method:'post',
params:{mensaje:'Hola mundo'}});

Como se puede ver, se pueden pasar fácilmente parámetros a la página de destino que queremos que se muestre. También se puede mostrar texto estático generado en la propia página.

Pero como reza el título, lo que busco es diseñar un cuadro que permita la interacción con el usuario. Y para ello, una vez tenemos el cuadro deberemos hacer estos arreglos.

El llamar a otra página para mostrar el cuadro nos ayudará a abstraer la funcionalidad que queremos ofrecer para distintas páginas. Pero esa misma abstracción nos hará un poco más difícil su uso.

Deberemos pasarle a la página que mostrará el contenido el nombre de 2 funciones que serán las encargadas de ejecutar las acciones cuando responda afirmativa o negativamente y crear dichas funciones, por supuesto.

Así tendríamos que añadir a la llamada anterior algo como esto:

params:{...,funcSi:'funcionSi',funcNo:'funcionNo'}

La página que muestra el contenido podría ser algo tan simple como esto:

<?php
echo $_POST['mensaje'];
?>
<div id="botones">
<input type="button" value="Sí" onClick="<?= $_POST['funcSi']?>()"/>
<input type="button" value="No" onClick="<?= $_POST['funcNo']?>()"/>
</div>

Y para terminar, las funciones llamadas desde la ventana deberían utilizar esta función:

Modalbox.hide();

Para ocultar la ventana ya que no hace falta. Con esto tendríamos un funcional (aunque aún no demasiado estético) cuadro de mensaje listo para usar.

Json en PHP

Si tenéis que utilizar JSON en algún servidor que tenga la versión 5.1 de PHP y en el que no tengáis control, una de las mejores soluciones es usar el framework de Zend. Sin embargo, tener que bajar todo el framework tan solo para mandar un array a un script es un poco exagerado.
Para esos casos, os dejo el archivo retocado para poder utilizar esta útil función en PHP.

Para usarlo tan solo debéis llamar a esta función:

$json = Zend_Json_Encoder::encode ($array);