I don't think that would work on the original version of tablesorter. It will ignore the second header row.
But, if you are using my fork of tablesorter, you can set it up as follows (demo):
HTML
<table class="tablesorter">
<thead>
<tr>
<th class="sorter-false">AlphaNumeric</th>
<th class="sorter-false">Numeric</th>
<th class="sorter-false">Animals</th>
<th class="sorter-false">Sites</th>
</tr>
<tr>
<th class="sorter-myparser">AN</th>
<th>N</th>
<th>An</th>
<th>S</th>
</tr>
</thead>
<tbody>
<tr>
<td data-sort-value="abc 123">abc 123</td>
<td>10</td>
<td>Koala</td>
<td>http://www.google.com</td>
</tr>
...
</tbody>
</table>
Script
$(function () {
$.tablesorter.addParser({
// use a unique id
id: 'myparser',
is: function () {
return false;
},
format: function (s, table, cell, cellIndex) {
return $(cell).attr('data-sort-value');
},
// flag for filter widget (true = ALWAYS search parsed values;
// false = search cell text)
parsed: true,
type: 'text'
});
$('table').tablesorter({
theme: 'blue'
});
});
And actually if that is all your parser does... in the latest version, you can set the textAttribute
option and accomplish the same thing without a custom parser (demo):
$(function () {
$('table').tablesorter({
theme: 'blue',
textAttribute: 'data-sort-value'
});
});