jQuery tableSorter

Permite crear tablas ordenables a partir de una tabla HTML estándar. Se hace clic sobre las cabeceras de cada columna para ordenar.

Código:

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.tablesorter.js"></script>
<script>
$(document).ready(function() {
  //cuando la página se cargue convertimos la tabla con id "simple" en una tabla ordenable
	$("#simple").tableSorter();
});
</script>

Demo:

Nota, hemos separado en el campo "Compra total" el valor numérico con un <span>numero</span> € de manera que el plugin distingue el valor a ordenar.

Nombre Edad Compra total Email Fecha
Peter 28 9.99 peter.parker@gmail.com Jul 6, 2006 8:14 AM
John 32 19.99 john.doe@gmail.com Dec 10, 2002 5:14 AM
Clark 18 15.89 c.kent@gmail.com Jan 12, 2003 11:14 AM


Seleccionando la columna por defecto a ordenar

Seleccionamos una columna por defecto a ordenar .

Código:

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.tablesorter.js"></script>
<script>
$(document).ready(function() {
	$("#simple-init-sort").tableSorter({
		sortColumn: 'nombre'	//Índice de la columna o nombre (en minúsculas) que hemos dado a la columna, para ordenar.
	});
});
</script>

Demo:

Nombre Edad Compra total Email Fecha
Peter 28 9.99 peter.parker@gmail.com Jul 6, 2006 8:14 AM
John 32 19.99 john.doe@gmail.com Dec 10, 2002 5:14 AM
Clark 18 15.89 c.kent@gmail.com Jan 12, 2003 11:14 AM


Estilos: Dando estilo CSS a las cabeceras

Podemos añadir clases css personalizadas a las cabeceras cuando ordenamos cada columna.

Código:


<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.tablesorter.js"></script>
<script>
$(document).ready(function() {
	$("#styling").tableSorter({
		sortColumn: 'nombre',			// número entero del índice o nombre de la columna en minúsculas
		sortClassAsc: 'headerSortUp',		// clase css de la cabecera de la columna cuando aplicamos un orden ascendente
		sortClassDesc: 'headerSortDown',	// clase css de la cabecera de la columna cuando aplicamos un orden descendente
		headerClass: 'header'			// clase genérica de las cabeceras (th's)
	});
});
</script>

Demo:

Nombre Edad Compra total Email Fecha
Peter 28 9.99 peter.parker@gmail.com Jul 6, 2006 8:14 AM
John 32 19.99 john.doe@gmail.com Dec 10, 2002 5:14 AM
Clark 18 15.89 c.kent@gmail.com Jan 12, 2003 11:14 AM


Estilos: Cabeceras personalizadas y rallado de líneas

Añadimos estilos personalizados para las cabeceras, y dibujamos las líneas de la tabla en dos estilos diferente, las pares y las impares.

Código:

<script>
$(document).ready(function() {
	$("#styling-cutom-striping").tableSorter({
		sortColumn: 'nombre',			// número entero del índice o nombre de la columna en minúsculas
		sortClassAsc: 'headerSortUp',		// clase css de la cabecera de la columna cuando aplicamos un orden ascendente
		sortClassDesc: 'headerSortDown',	// clase css de la cabecera de la columna cuando aplicamos un orden descendente
		headerClass: 'header',			// clase genérica de las cabeceras (th's)
		stripingRowClass: ['even','odd'],	//Estilos css para las líneas pares y para las impares.
		stripeRowsOnStartUp: true		// Dibujamos las líneas de las tablas con distintos css indicados en strinpingRowClass.
	});
});
</script>

Demo:

Nombre Edad Compra total Email Fecha
Peter 28 9.99 peter.parker@gmail.com Jul 6, 2006 8:14 AM
John 32 19.99 john.doe@gmail.com Dec 10, 2002 5:14 AM
Clark 18 15.89 c.kent@gmail.com Jan 12, 2003 11:14 AM


Estilos: Cabeceras personalizadas y marcado de columna seleccionada.

Añade un estilo diferente a la columna seleccionada .

Código:

<script>
$(document).ready(function() {
	$("#styling-cutom-highlighting").tableSorter({
		sortColumn: 'nombre',			// número entero del índice o nombre de la columna en minúsculas
		sortClassAsc: 'headerSortUp',		// clase css de la cabecera de la columna cuando aplicamos un orden ascendente
		sortClassDesc: 'headerSortDown',	// clase css de la cabecera de la columna cuando aplicamos un orden descendente
		highlightClass: 'highlight', 		// clase css para la clumna seleccionada.
		headerClass: 'header',			// clase css de las columnas por defecto (th's)
	});
});
</script>

Demo:

Nombre Edad Compra total Email Fecha
Peter 28 9.99 peter.parker@gmail.com Jul 6, 2006 8:14 AM
John 32 19.99 john.doe@gmail.com Dec 10, 2002 5:14 AM
Clark 18 15.89 c.kent@gmail.com Jan 12, 2003 11:14 AM


Fechas: Ordenando fechas en formato español.

Cambiamos la ordenación por defecto de las fechas en formato corto al estándar español.

Código:

<script>
$(document).ready(function() {
	$("#date-es").tableSorter({
		sortColumn: 'nombre',			// número entero del índice o nombre de la columna en minúsculas
		sortClassAsc: 'headerSortUp',		// clase css de la cabecera de la columna cuando aplicamos un orden ascendente
		sortClassDesc: 'headerSortDown',	// clase css de la cabecera de la columna cuando aplicamos un orden descendente
		headerClass: 'header',			// clase genérica de las cabeceras (th's)
		dateFormat: 'dd/mm/yyyy' 		// se indica el formato de la fecha no ISO, por defecto us, nosotros indicamos el formato español
	});
});
</script>

Demo:

Nombre Edad Compra total Fecha ISO Formato corto español Formato largo americano
Peter 28 9.99 2001/12/24 24/12/2001 Jul 6, 2006 8:14 AM
John 32 19.99 2002/10/14 10/11/2001 Dec 10, 2002 5:14 AM
Clark 18 15.89 2006/01/17 21/4/1962 Jan 12, 2003 11:14 AM