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, table, cell, $cell) {
// 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;
},
// flag for filter widget (true = ALWAYS search parsed values; false = search cell text)
parsed: false,
// 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) ››