<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-us"> <head> <title>jQuery plugin: Tablesorter 2.0 - Writing custom parsers</title> <link rel="stylesheet" href="css/jq.css" type="text/css" media="print, projection, screen" /> <link rel="stylesheet" href="../themes/blue/style.css" type="text/css" media="print, projection, screen" /> <script type="text/javascript" src="../jquery-latest.js"></script> <script type="text/javascript" src="../jquery.tablesorter.js"></script> <script type="text/javascript" src="../addons/pager/jquery.tablesorter.pager.js"></script> <script type="text/javascript" src="js/chili/chili-1.8b.js"></script> <script type="text/javascript" src="js/docs.js"></script> <script type="text/javascript" src="js/examples.js"></script> <script type="text/javascript" id="js"> // add parser through the tablesorter addParser method $.tablesorter.addParser({ // set a unique id id: 'grades', is: function(s) { // return false so this parser is not auto detected return false; }, format: function(s) { // format your data for normalization return s.toLowerCase().replace(/good/,2).replace(/medium/,1).replace(/bad/,0); }, // set type, either numeric or text type: 'numeric' }); $(function() { $("table").tablesorter({ headers: { 6: { sorter:'grades' } } }); }); </script> </head> <body> <div id="banner"> <h1>table<em>sorter</em></h1> <h2>Writing custom parsers</h2> <h3>Flexible client-side table sorting</h3> <a href="index.html">Back to documentation</a> </div> <div id="main"> <h1>Demo</h1> <div id="demo"> <table cellspacing="1" class="tablesorter"> <thead> <tr> <th>Name</th> <th>Major</th> <th>Gender</th> <th>English</th> <th>Japanese</th> <th>Calculus</th> <th>Overall grades</th> </tr> </thead> <tbody> <tr> <td>Student01</td> <td>Languages</td> <td>male</td> <td>80</td> <td>70</td> <td>75</td> <td>bad</td> </tr> <tr> <td>Student02</td> <td>Mathematics</td> <td>male</td> <td>90</td> <td>88</td> <td>100</td> <td>good</td> </tr> <tr> <td>Student03</td> <td>Languages</td> <td>female</td> <td>85</td> <td>95</td> <td>80</td> <td>medium</td> </tr> </tbody> </table> </div> <h1>Javascript</h1> <div id="javascript"> <pre class="javascript"></pre> </div> <h1>HTML</h1> <div id="html"> <pre class="html"></pre> </div> </div> <script src="http://www.google-analytics.com/urchin.js" type="text/javascript"></script> <script type="text/javascript"> _uacct = "UA-2189649-2"; urchinTracker(); </script> </body> </html>