NOTE! This widget can be applied to the original plugin.

Demo

First Name Last Name Age Total Discount Date
Peter Parker 28 $9.99 20% Jul 6, 2006 8:14 AM
John Hood 33 $19.99 25% Dec 10, 2002 5:14 AM
Clark Kent 18 $15.89 44% Jan 12, 2003 11:14 AM
Bruce Almighty 45 $153.19 44% Jan 18, 2001 9:12 AM
Bruce Evans 22 $13.19 11% Jan 18, 2007 9:12 AM

Page Header

<!-- blue theme stylesheet with additional css styles added in v2.0.17 -->
<link rel="stylesheet" href="../css/blue/style.css">
<!-- tablesorter plugin -->
<script src="../js/jquery.tablesorter.js"></script>

<!-- tablesorter widget file - loaded after the plugin -->
<script src="../js/jquery.tablesorter.widgets.js"></script>

Javascript


	


	
CSS

	

		
/*
 This css is part of the blue/style.css theme, shown as an example
 To work with the zebra widget, include the .odd and .even color definitions as well
 as definitions for the "primary", "secondary" and "tertiary" sorts.
*/
/* Column Widget - column sort colors */
table.tablesorter tbody td.primary, table.tablesorter tbody tr.odd td.primary {
	background-color: #c0c0ff;
}
table.tablesorter tbody tr.even td.primary {
	background-color: #e8e8ff;
}

table.tablesorter tbody td.secondary, table.tablesorter tbody tr.odd td.secondary {
	background-color: #d6d6ff;
}
table.tablesorter tbody tr.even td.secondary {
	background-color: #e8e8ff;
}

table.tablesorter tbody td.tertiary, table.tablesorter tbody tr.odd td.tertiary {
	background-color: #e5e5ff;
}
table.tablesorter tbody tr.even td.tertiary {
	background-color: #f8f8ff;
}

	


	
HTML

	

		

	




	

	Next up: Basic: Applying the filter widget ››