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!!

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.

¡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