<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>jQuery tablesorter 2.0 - Force a default sorting 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> <!-- Tablesorter: optional --> <script src="../addons/pager/jquery.tablesorter.pager.js"></script> <script id="js">$(function() { // call the tablesorter plugin $("table").tablesorter({ theme : 'blue', // sort on the first column and in ascending order PRIOR TO the sort on the selected column sortForce: [[0,0]] }); });</script> </head> <body> <div id="banner"> <h1>table<em>sorter</em></h1> <h2>Force a default sorting 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> </p> <ul> <li>Click to sort any column header to see the forcing of the first column sort.</li> <li>This option is part of the original plugin</li> </ul> <h1>Demo</h1> <div id="demo"><table class="tablesorter"> <thead> <tr> <th>First Name</th> <th>Last Name</th> <th>Age</th> <th>Total</th> <th>Discount</th> <th>Date</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-sort-append.html">Append a sort to the selected sorting order ››</a> </div> </div> </body> </html>