NOTE!
- In v2.15.0, the
parsed
parameter- This parameter is a flag used by the filter widget.
- When
true
, the filter widget will only search through parsed data for matches. - If
false
(default value), the filter widget will search through the cell text for matches.
- This method of writing custom parsers will NOT work with the original tablesorter 2.0.5b plugin because the format function does not consistently provide the
cell
andcellIndex
parameters.
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>