<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>jQuery tablesorter 2.0 - Setting initial sorting order with metadata</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 (but required for this demo) --> <script src="../js/extras/jquery.metadata.js"></script> <script id="js">$(function() { // call the tablesorter plugin, the magic happens in the markup $("table").tablesorter({ theme : 'blue' }); });</script> </head> <body> <div id="banner"> <h1>table<em>sorter</em></h1> <h2>Setting initial sorting order with metadata</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"><!-- sortlist is appended to the table using the class attribute and is picked up by metadata plugin --> <table class="tablesorter {sortlist: [[0,0],[4,0]]}"> <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>Page Header</h1> <div> <pre class="prettyprint lang-html"><script src="js/jquery-latest.min.js"></script> <!-- Tablesorter: required --> <link rel="stylesheet" href="../css/theme.blue.css"> <script src="../js/jquery.tablesorter.js"></script> <!-- Tablesorter: optional (but required for this demo) --> <script src="../js/extras/jquery.metadata.js"></script></pre> </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-meta-headers.html">Disable header using metadata ››</a> </div> </div> </body> </html>