NOTE!

Demo

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

Javascript

$(function() {

  // call the tablesorter plugin
  $("table").tablesorter({
    theme : 'blue',
    /*
    // define an overall custom text extraction function
    textExtraction: function(node, table, cellIndex) {
      return $(node).text();
    }
    */

    // Define a custom text extraction function for each column
    // In this example, textExtraction 1-5 functions don't really need to
    // be defined, since they can also be obtained using `$(node).text()`
    textExtraction: {
      0: function(node, table, cellIndex){ return $(node).find("strong").text(); },
      1: function(node, table, cellIndex){ return $(node).find("div").text(); },
      2: function(node, table, cellIndex){ return $(node).find("span").text(); },
      3: function(node, table, cellIndex){ return $(node).find("em").text(); },
      4: function(node, table, cellIndex){ return $(node).find("a").text(); },
      5: function(node, table, cellIndex){ return $(node).find("u").text(); }
    }

  });

});

HTML

<table class="tablesorter">
  <thead>
    <tr>
      <th>First Name</th>
      <th>Last Name</th>
      <th>Age</th>
      <th>Total</th>
      <th>Discount</th>
      <th>Date</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Mr. <strong>Peter</strong></td>
      <td><div>Parker</div></td>
      <td><span>28</span></td>
      <td><em>$9.99</em></td>
      <td><a href="#">20%</a></td>
      <td><u>Jul 6, 2006 8:14 AM</u></td>
    </tr>
    <tr>
      <td>Dr. <strong>John</strong></td>
      <td><div>Hood</div></td>
      <td><span>33</span></td>
      <td><em>$19.99</em></td>
      <td><a href="#">25%</a></td>
      <td><u>Dec 10, 2002 5:14 AM</u></td>
    </tr>
    <tr>
      <td>Rep <strong>Clark</strong></td>
      <td><div>Kent</div></td>
      <td><span>18</span></td>
      <td><em>$15.89</em></td>
      <td><a href="#">44%</a></td>
      <td><u>Jan 12, 2003 11:14 AM</u></td>
    </tr>
    <tr>
      <td>Rev <strong>Bruce</strong></td>
      <td><div>Almighty</div></td>
      <td><span>45</span></td>
      <td><em>$153.19</em></td>
      <td><a href="#">44%</a></td>
      <td><u>Jan 18, 2001 9:12 AM</u></td>
    </tr>
    <tr>
      <td>Capt <strong>Bruce</strong></td>
      <td><div>Evans</div></td>
      <td><span>22</span></td>
      <td><em>$13.19</em></td>
      <td><a href="#">11%</a></td>
      <td><u>Jan 18, 2007 9:12 AM</u></td>
    </tr>
  </tbody>
</table>
Next up: Applying widgets ››