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:

Name Age Total purchase Email Date
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


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:

Name Age Total purchase Email Date
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


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:

Name Age Total purchase Email Date
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


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:

Name Age Total purchase Email Date
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


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:

Name Age Total purchase Email Date
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


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:

Name Age Total purchase ISO Date UK Short Date US Long Date
Peter 28 $9.99 2001/12/24 12/24/2001 Jul 6, 2006 8:14 AM
John 32 $19.99 2002/10/14 12/10/2001 Dec 10, 2002 5:14 AM
Clark 18 $15.89 2006/01/17 4/21/1962 Jan 12, 2003 11:14 AM