NOTE!

Demo

Name (Last)
Originally from...
Birthday
Joe Allen South Carolina Jan 15
Lisa Torres Maryland March 2nd
Peter Louis Franklin Coventry Boxing Day (Dec 26th)
Maria Consuela de Los Angeles Ortiz Del Toro-Jones Texas 10 Mayo
Mike "the Smasher" Bigglesworth Rhode Island 22nd of June
Fredrick Smith Ohio 10th Mar

Javascript

// add parser through the tablesorter addParser method
$(function(){

  $.tablesorter.addParser({
    // set a unique id
    id: 'data',
    is: function(s) {
      // return false so this parser is not auto detected
      return false;
    },
    format: function(s, table, cell, cellIndex) {
      var $cell = $(cell);
      // I could have used $(cell).data(), then we get back an object which contains both
      // data-lastname & data-date; but I wanted to make this demo a bit more straight-forward
      // and easier to understand.

      // first column (zero-based index) has lastname data attribute
      if (cellIndex === 0) {
        // returns lastname data-attribute, or cell text (s) if it doesn't exist
        return $cell.attr('data-lastname') || s;

      // third column has date data attribute
      } else if (cellIndex === 2) {
        // return "mm-dd" that way we don't need to use "new Date()" to process it
        return $cell.attr('data-date') || s;
      }

      // return cell text, just in case
      return s;
    },
    // set type, either numeric or text
    type: 'text'
  });

  $('table').tablesorter({
    theme: 'blue',
    headers: {
      0 : { sorter: 'data' },
      2 : { sorter: 'data' }
    },
    widgets: ['zebra']
  });

});

HTML

<table>
<thead>
  <tr>
    <th>Name (Last)</th>
    <th>Originally from...</th>
    <th>Birthday</th>
  </tr>
</thead>
  <tbody>
    <tr>
      <td data-lastname="Allen">Joe Allen</td>
      <td>South Carolina</td>
      <td data-date="01-15">Jan 15</td>
    </tr>
    <tr>
      <td data-lastname="Torres">Lisa Torres</td>
      <td>Maryland</td>
      <td data-date="03-02">March 2nd</td> <!-- leading zeros needed to sort properly! -->
    </tr>
    <tr>
      <td data-lastname="Franklin">Peter Louis Franklin</td>
      <td>Coventry</td>
      <td data-date="12-26">Boxing Day (Dec 26th)</td>
    </tr>
    <tr>
      <td data-lastname="Jones">Maria Consuela de Los Angeles Ortiz Del Toro-Jones</td>
      <td>Texas</td>
      <td data-date="05-10">10 Mayo</td>
    </tr>
    <tr>
      <td data-lastname="Bigglesworth">Mike "the Smasher" Bigglesworth</td>
      <td>Rhode Island</td>
      <td data-date="06-22">22nd of June</td>
    </tr>
    <tr>
      <td data-lastname="Smith">Fredrick Smith</td>
      <td>Ohio</td>
      <td data-date="03-10">10th Mar</td>
    </tr>
  </tbody>
</table>

Next up: Dealing with markup inside cells (textExtraction function) ››