NOTE!
- 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) { // 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>