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.

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:

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:

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:

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:

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: