<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>jQuery plugin: Tablesorter 2.0 - Set initial sort order</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(){ $("table").tablesorter({ theme : 'blue', // default sortInitialOrder setting sortInitialOrder: "asc", // pass the headers argument and passing a object headers: { // set initial sort order by column, this headers option setting overrides the sortInitialOrder option 0: { sortInitialOrder: 'desc' } } }); });</script> </head> <body> <div id="banner"> <h1>table<em>sorter</em></h1> <h2>Set initial sort order</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> <ul> <li>Adding "sortInitialOrder" inside of the "headers" option was added in version 2.0.8 (not part of the original plugin).</li> <li>In versions 2.3+, the initial sort order of the columns can be set using any of the following methods (they all do the same thing), in order of priority: <ul> <li>jQuery data <code>data-sort-initial-order="desc"</code> (equivalent to <code>data-sortinitialorder="desc"</code>).</li> <li>metadata <code>class="{ sortInitialOrder: "desc" }"</code>. This requires the metadata plugin.</li> <li>headers option <code>headers : { 0 : { sortInitialOrder: "desc" } }</code>.</li> <li>header class name <code>class="sortInitialOrder-desc"</code>.</li> <li>overall <code>sortInitialOrder</code> option setting.</li> </ul> </li> </ul> <p> <h1>Demo</h1> <div id="demo"><table class="tablesorter"> <thead> <tr> <th>First Name (desc)</th> <th>Last Name (asc)</th> <th class="sortInitialOrder-desc">Age (desc)</th> <th>Total (asc)</th> <th data-sortinitialorder="desc">Discount (desc)</th> <!-- equivalent to data-sortInitialOrder="desc" or data-sort-initialorder="desc" --> <th>Date (asc)</th> </tr> </thead> <tbody> <tr> <td>Peter</td> <td>Parker</td> <td>28</td> <td>$9.99</td> <td>20%</td> <td>Jul 6, 2006 8:14 AM</td> </tr> <tr> <td>John</td> <td>Hood</td> <td>33</td> <td>$19.99</td> <td>25%</td> <td>Dec 10, 2002 5:14 AM</td> </tr> <tr> <td>Clark</td> <td>Kent</td> <td>18</td> <td>$15.89</td> <td>44%</td> <td>Jan 12, 2003 11:14 AM</td> </tr> <tr> <td>Bruce</td> <td>Almighty</td> <td>45</td> <td>$153.19</td> <td>44%</td> <td>Jan 18, 2001 9:12 AM</td> </tr> <tr> <td>Bruce</td> <td>Evans</td> <td>22</td> <td>$13.19</td> <td>11%</td> <td>Jan 18, 2007 9:12 AM</td> </tr> </tbody> </table></div> <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-sortreset-sortrestart.html">Using sortReset & sortRestart ››</a> </div> </div> </body> </html>