Explicación: Buscando un código/aplicación, donde tengo toda una lista de personas (nombre, apellido paterno, apellido materno, edad), lo que yo queria es de que cuando se le de clic a una de las cabeceras me ordenara los datos por columna.
Ejemplo:
Al darle clic a First Name me ordene de mayor a menor ó de menor a mayor los nombres, y que ahora si le daba click a la cabecera de Age me los ordenara asi:
Bueno todo esto es posible gracias a [TableSorter]con el plugin de Jquery.
Caracteristicas:
- Ordenamiento por múltiples columnas
- Interpreta y ordena por texto
- URLs
- Números Enteros, moneda, números flotantes
- Direcciones IP
- Fecha, hora
- Soporta (IE 6.0+, FF 2+, Safari 2.0+, Opera 9.0+).
- etc.
Como ultilizarlo:
Descargamos la ultima versión del JQuery y jquery.tablesorter.js, despues llamamos los javascript en el header:
<script src="js/jquery.js" type="text/javascript"></script>
<script src="js/jquery.tablesorter.js" type="text/javascript"></script>
Llamamos la afuncion de tablesorter, esto es para decirle a que tabla se le va aplicar el plugin y asi pueda ordenarlos.
<script type="text/javascript">
$(document).ready(function()
{
$("#myTable").tablesorter();
}
);
</script>
Agregamos la hoja de estilo:
<link href="styles.css" rel="stylesheet" type="text/css" />
Y por último incluimos nuestra tabla normal, teniendo cuidado en asignarle un identificador y utilizar los tags thead y tbody para separar los títulos del contenido.
<table id="myTable">
<thead>
<tr>
<th>Last Name</th>
<th>First Name</th>
<th>Email</th>
<th>Due</th>
<th>Web Site</th>
</tr>
</thead>
<tbody>
<tr>
<td>Smith</td>
<td>John</td>
<td>jsmith@gmail.com</td>
<td>$50.00</td>
<td>http://www.jsmith.com</td>
</tr>
<tr>
<td>Bach</td>
<td>Frank</td>
<td>fbach@yahoo.com</td>
<td>$50.00</td>
<td>http://www.frank.com</td>
</tr>
<tr>
<td>Doe</td>
<td>Jason</td>
<td>jdoe@hotmail.com</td>
<td>$100.00</td>
<td>http://www.jdoe.com</td>
</tr>
<tr>
<td>Conway</td>
<td>Tim</td>
<td>tconway@earthlink.net</td>
<td>$50.00</td>
<td>http://www.timconway.com</td>
</tr>
</tbody>
</table>
Descarga:
Link Página oficial: [Tablesorter]
