Pedir presupuesto

Tabla ordenada con Ajax

Esta vez vamos a ver como utilizar un framwork llamado Stuart Langridge’s sorttable.js, para esto voy a intentar traducir lo que explican en Woork:

TABLA ORDENADA CON AJAX

PASO 1: «Incluir sottable.js»

Lo primeor que haremos será crear una nueva página e introducir entre las etiquetas <HEAD></HEAD> el sigiuente código:

<script src=«sorttable.js» type=«text/javascript»></script>

 

PASO 2: «Código HTML para crear la tabla ordenada»

Ahora cremos una tabla, poniendo como parámetro la clase «sortable»:

<table class=«sortable«></table>

 

Si tienes mas de una tabla en tu página, puedes aplicar el ordenamiento en cada una de ellas. La estructura general de cada tabla que quieras ordenar tendrá un <thead> (Encabezado de tabla) un <tbody> (Cuerpo de la tabla) y un <tfooter> (Pie de tabla) como en el sigiuente ejemplo:

 

<table class=«sortable»>
<!– Encabezado de tabla –>
<thead>

<tr>
<th>Producto</th>
<th>Precio</th>
</tr>

</thead>
<!– Cuerpo de la tabla–>
<tbody>

<tr>
<td>IPOD touch</td>
<td>290</td>
</tr>

<tr>
<td>IPOD Shufle</td>
<td>85</td>
</tr>

</tbody>

<!– Pie de tabla–>
<tfoot>

<tr>
<td>Total</td>
<td> 00.00</td>
</tr>

</tfoot>
</table>

Cuando haces click en «header» (en este cao «Producto» o «Precio») todas las filas que estén dentro de la etiqueta <tbody> se ordenarán ascendente o descendientemente.

PASO 3: «Rellenar las filas utilizando PHP»

Puedes rellenar una tabla con algun dato usando un lenguaje de servidor como PHP, Coldfusion, Asp o similar. Si usas PHP puedes utilizar este codigo simple:

<?php
// Include connection to your database
include(‘dbconnection.php’);
$getProductos_sql = ‘SELECT * FROM PRODUCTOS;
$getProductos= mysql_query($getProductos_sql);?>

<table class=«sortable»>
<!– Table Header –>
<thead>

<tr>
<th>Producto</th>
<th>Precio</th>
</tr>

</thead>
<!– Tabel body–>
<tbody>
<?php while ($row = mysql_fetch_array($getProducto)) {?>
<tr>
<th><?php echo $row.[‘productoName’] ?></th>
<th><?php echo $row.[‘productoPrecio’] ?></th>
</tr>

<?php } ?>
</tbody>

<!– Tabel footer–>
<tfoot>

<tr>
<td></td>
<td>…. </td>
</tr>

</tfoot>
</table>

Descarga el tutorial: Download

VIA: WOORK

¿Te ha gustado?, Comparte!!

Compartir en facebook
Compartir en twitter
Compartir en linkedin
Compartir en whatsapp
Compartir en email

Deja una respuesta

Tu dirección de correo electrónico no será publicada.

¡Pide tu presupuesto!

Completa los campos para poder enviarte un presupuesto

Todos y tu presupuesto son a medida y totalmente personalizados, entendemos que dos proyectos online no pueden ser iguales y que cada cliente tiene unos objetivos y necesidades muy diferentes, es por eso que para elaborar un presupuesto, necesitamos saber de ti, tu proyecto y objetivos.

Los campos marcados con (*) son obligatorios.

La comunicación enviada quedará incorporada a un fichero del que es responsable COLORDEU. Esta comunicación se utilizará exclusivamente para tratar sus datos para atender su solicitud, siempre de acuerdo al Reglamento (UE) 2016/679 (RGPD), la Ley Orgánica 15/1999 (LOPD) y el Real Decreto 1720/2007 de desarrollo de la LOPD), sobre protección de datos. Sus datos no se comunicarán a terceros, excepto por obligación legal, y se mantendrán mientras no solicite su cancelación. En cualquier momento usted puede ejercer los derechos de acceso, rectificación, portabilidad y oposición, o si procede, a la limitación y/o cancelación del tratamiento, comunicándolo por escrito, indicando sus datos personales mediante un email a hola@colordeu.es