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

Demo

jQuery UI Theme:

Tablesorter Theme:
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

<!-- ui theme stylesheet - contents shown below -->
<link rel="stylesheet" href="../css/ui/style.css">
<!-- jQuery UI theme (cupertino example here) -->
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/cupertino/jquery-ui.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

	

		
/* jQuery UI Theme required css; as seen in css/ui/style.css file */
table.tablesorter {
  font-family: arial;
  margin: 10px 0pt 15px;
  font-size: 8pt;
  width: 100%;
  text-align: left;
  padding: 5px;
}
table.tablesorter thead tr th, table.tablesorter tfoot tr th {
  border-collapse: collapse;
  font-size: 8pt;
  padding: 4px;
}
table.tablesorter thead tr th {
  background-repeat: no-repeat;
  background-position: center right;
  cursor: pointer;
  white-space: normal;
  /* UI hover and active states make the font normal and the table resizes, this fixes it */
  font-weight: bold !important;
}
table.tablesorter thead tr th .inner {
  position: relative;
  padding-right: 20px; /* wider than the icon */
}
table.tablesorter thead tr th .ui-icon {
  position: absolute;
  right: 3px;
  top: 50%;
  margin-top: -8px; /* half the icon height; older IE doesn't like this */
}

table.tablesorter tbody td {
  padding: 4px;
  vertical-align: top;
}
/* This allows you to use ui-state-default as the zebra stripe color */
table.tablesorter tr.ui-state-default {
  background-image: url();
}

/* filter widget */
table.tablesorter thead input.filter {
  width: 90%;
}
table.tablesorter thead tr.filters, table.tablesorter thead tr.filters td {
  text-align: center;
}

	



	
HTML

	

		

	




	

	Next up: Resizable Columns widget ››