NOTE! These options were added in version 2.7 (they are not part of 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

Javascript


	

	
HTML

	Before
	

		
<thead>
  <tr>
    <th>First Name</th>
    <th>Last Name</th>
    <th>Age</th>
    <th>Total</th>
    <th>Discount</th>
    <th>Date</th>
  </tr>
</thead>

	

	After
	

		
<thead>
  <tr class="tablesorter-headerRow">
    <th class="tablesorter-header"><div class="tablesorter-header-inner"><em>1:</em> <i class="tablesorter-icon"></i>First Name</div></th>
    <th class="tablesorter-header"><div class="tablesorter-header-inner"><em>2:</em> <i class="tablesorter-icon"></i>Last Name</div></th>
    <th class="tablesorter-header"><div class="tablesorter-header-inner"><em>3:</em> <i class="tablesorter-icon"></i>Age</div></th>
    <th class="tablesorter-header"><div class="tablesorter-header-inner"><em>4:</em> <i class="tablesorter-icon"></i>Total</div></th>
    <th class="tablesorter-header"><div class="tablesorter-header-inner"><em>5:</em> <i class="tablesorter-icon"></i>Discount</div></th>
    <th class="tablesorter-header"><div class="tablesorter-header-inner"><em>6:</em> <i class="tablesorter-icon"></i>Date</div></th>
  </tr>
</thead>

* Note: the tablesorter-icon was only added for emphasis in this demo, it isn't used at all by the blue template.
	




	

	Next up: Triggers sortEnd and sortStart ››