Simple tableSorter

Addes a simpel tableSorter with the default properties. Click on the header to start sorting.

Code:

<script>
$(document).ready(function() {
	$(#simple).tableSorter();
});
</script>

Demo:

Default sorting column

Make the tableSorter sort on a column on startup.

Code:

<script>
$(document).ready(function() {
	$(#simple-init-sort).tableSorter({
		sortColumn: 'name'	// Integer or String of the name of the column to sort by.  
	});
});
</script>

Demo:

Styling: Adding a css styles to headers

Adds a tableSorter with custom header and sorting classes.

Code:

<script>
$(document).ready(function() {
	$("#styling").tableSorter({
		sortColumn: 'name',			// Integer or String of the name of the column to sort by.
		sortClassAsc: 'headerSortUp',		// class name for ascending sorting action to header
		sortClassDesc: 'headerSortDown',	// class name for descending sorting action to header
		headerClass: 'header'			// class name for headers (th's)
	});
});
</script>

Demo:

Styling: Custom header style and row striping

Adds a tableSorter with custom header, sorting classes and row striping.

Code:

<script>
$(document).ready(function() {
	$("#styling-cutom-striping").tableSorter({
		sortColumn: 'name',			// Integer or String of the name of the column to sort by.
		sortClassAsc: 'headerSortUp',		// Class name for ascending sorting action to header
		sortClassDesc: 'headerSortDown',	// Class name for descending sorting action to header
		headerClass: 'header',			// Class name for headers (th's)
		stripingRowClass: ['even','odd'],	// Class names for striping supplyed as a array.
		stripeRowsOnStartUp: true		// Strip rows on tableSorter init.
	});
});
</script>

Demo:

Styling: Custom header style and sort highlighting.

Adds row striping.

Code:

<script>
$(document).ready(function() {
	$("#styling-cutom-highlighting").tableSorter({
		sortColumn: 'name',			// Integer or String of the name of the column to sort by.
		sortClassAsc: 'headerSortUp',		// Class name for ascending sorting action to header
		sortClassDesc: 'headerSortDown',	// Class name for descending sorting action to header
		highlightClass: 'highlight', 		// class name for sort column highlighting.
		headerClass: 'header',			// Class name for headers (th's)
	});
});
</script>

Demo:

Dates: Changing default date from US to UK format.

Change default short date format to UK from US. Keep in mind that ISO dates are allways supprted.

Code:

<script>
$(document).ready(function() {
	$("#date-uk").tableSorter({
		sortColumn: 'name',			// Integer or String of the name of the column to sort by.
		sortClassAsc: 'headerSortUp',		// Class name for ascending sorting action to header
		sortClassDesc: 'headerSortDown',	// Class name for descending sorting action to header
		headerClass: 'header',			// Class name for headers (th's)
		dateFormat: 'dd/mm/yyyy' 		// set date format for non iso dates default us, in this case override and set uk-format
	});
});
</script>

Demo: