<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>jQuery tablesorter 2.0 - Sorting empty cells</title> <!-- jQuery --> <script src="js/jquery-latest.min.js"></script> <!-- Demo stuff --> <link rel="stylesheet" href="css/jq.css"> <link href="css/prettify.css" rel="stylesheet"> <script src="js/prettify.js"></script> <script src="js/docs.js"></script> <!-- Tablesorter: required --> <link rel="stylesheet" href="../css/theme.blue.css"> <script src="../js/jquery.tablesorter.js"></script> <script id="js">$(function() { // call the tablesorter plugin $("table").tablesorter({ theme : 'blue', // default "emptyTo" emptyTo: 'bottom' }); });</script> <script> $(function(){ $('select').change(function(){ var t = $('table'), v = $(this).val(); t[0].config.emptyTo = v; t.trigger("update"); }); }); </script> </head> <body> <div id="banner"> <h1>table<em>sorter</em></h1> <h2>Sorting empty cells</h2> <h3>Flexible client-side table sorting</h3> <a href="index.html">Back to documentation</a> </div> <div id="main"> <p class="tip"> <em>NOTE!</em> </p> <ul> <li>Set the <code>emptyTo</code> selector below: <ul> <li><code>top</code> - sort empty table cells to the top.</li> <li><code>bottom</code> - sort empty table cells to the bottom.</li> <li><code>none</code> or <code>zero</code> <ul> <li>Sort empty table cells as if the cell has the value equal to zero</li> <li>None/zero has a value less than A through Z (in javascript, <code>0 < 'A' && 0 < 'Z'</code>); so in an alphabetical column, empty cells will sort at the top in an ascending sort & at the bottom in a descending sort.</li> <li>In numerical columns, empty cells will sort as if their value was zero.</li> </ul> </li> </ul> <br> </li> <li>Individual columns can be modified by adding the following (they all do the same thing), set in order of priority: <ul> <li>jQuery data <code>data-empty="top"</code>.</li> <li>metadata <code>class="{ empty: 'top'}"</code>. This requires the metadata plugin.</li> <li>headers option <code>headers : { 0 : { empty : 'top' } }</code>.</li> <li>header class name <code>class="empty-top"</code>.</li> <li>Overall <code>emptyTo</code> option.</li> </ul> <br> </li> <li><code>emptyToBottom</code> option was added in v2.1.11, then replaced by the <code>emptyTo</code> option in v2.1.16.</li> </ul> <h1>Demo</h1> Set <code>emptyTo</code> option: <select> <option>bottom</option> <option>top</option> <option value="zero">none/zero</option> </select> <div id="demo"><table class="tablesorter"> <thead> <tr> <th class="empty-top">*Account #</th> <!-- empty-top class has higher priority than the "emptyTo" option --> <th>First Name</th> <th>Last Name</th> <th>Age</th> <th>Total</th> <th>Discount</th> <th>Diff</th> </tr> </thead> <tbody> <tr> <td>A43</td> <td>Peter</td> <td>Parker</td> <td>28</td> <td></td> <td>20.3%</td> <td>+3</td> </tr> <tr> <td>A255</td> <td></td> <td>Hood</td> <td></td> <td>19.99</td> <td>25.1%</td> <td>-7</td> </tr> <tr> <td></td> <td>Clark</td> <td></td> <td>18</td> <td>15.89</td> <td>44.2%</td> <td>-15</td> </tr> <tr> <td>A1</td> <td>Bruce</td> <td>Almighty</td> <td>45</td> <td>153.19</td> <td></td> <td>+19</td> </tr> <tr> <td>A102</td> <td>Bruce</td> <td>Evans</td> <td>56</td> <td>153.19</td> <td>23%</td> <td></td> </tr> <tr> <td>A109</td> <td>Larry</td> <td>Stevens</td> <td>56</td> <td>153.19</td> <td>23%</td> <td>0</td> </tr> <tr> <td>A99</td> <td>John</td> <td>Smithy</td> <td>56</td> <td>156</td> <td>22%</td> <td></td> </tr> <tr> <td>A119</td> <td>Mike</td> <td>Rowe</td> <td>55</td> <td>-53.99</td> <td>13%</td> <td>0</td> </tr> </tbody> </table></div> * <span class="label label-info">Note</span> The "Account #" column has the "empty-top" class name set which over-rides the <code>emptyTo</code> option (see the order of priority note above). <p></p> <h1>Javascript</h1> <div id="javascript"> <pre class="prettyprint lang-javascript"></pre> </div> <h1>HTML</h1> <div id="html"> <pre class="prettyprint lang-html"></pre> </div> <div class="next-up"> <hr /> Next up: <a href="example-option-sort-key.html">Change the default multi-sorting key ››</a> </div> </div> </body> </html>