<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html> <head> <title>tablesorter 2.0-dev demo, multi column sorting</title> <style type="text/css">@import "assets/css/default.css";</style> <script type="text/javascript" src="../jquery-latest.js"></script> <script type="text/javascript" src="../jquery.tablesorter.js"></script> <script type="text/javascript"> $(function() { $("table").tablesorter({debug: true}) $("a.append").click(appendData); }); var lastStudent = 23; var limit = 500; function appendData() { var tdTagStart = '<td>'; var tdTagEnd = '</td>'; var sex = ['male','female']; var major = ['Mathematics','Languages']; for(var i = 0; i < limit; i++) { var rnd = i % 2; var row = '<tr>'; row += tdTagStart + 'student' + (lastStudent++) + tdTagEnd; row += tdTagStart + major[rnd] + tdTagEnd; row += tdTagStart + sex[rnd] + tdTagEnd; row += tdTagStart + randomNumber() + tdTagEnd; row += tdTagStart + randomNumber() + tdTagEnd; row += tdTagStart + randomNumber() + tdTagEnd; row += tdTagStart + randomNumber() + tdTagEnd; row += '</tr>'; $("table/tbody:first").append(row); }; $("table").trigger('update'); return false; } function randomNumber() { return Math.floor(Math.random()*101) } </script> </head> <body> <h1>tablesorter 2.0-dev demo, multi column sorting</h1> <p> To select more then one column to sort by, hold down your shift key and press the "headers". Pressing a all ready sorted column while holding down shift will reverse the order. </p> <p> Releasing the shift key and pressing a column will result in a one column sort. </p> <p>Not big enough? <a href="#" class="append">Add 500 random rows of data </a> (can be clicked many times, more then a 1000 rows can be slow)</p> <table id="large" cellspacing="0" class="tablesorter"> <thead> <tr> <th colspan="2">One and Two</th> <th rowspan="2">Three</th> <th rowspan="2">Three</th> <th rowspan="2">Three</th> <th rowspan="2">Three</th> <th rowspan="2">Three</th> </tr> <tr> <th>Name</th> <th>Major</th> </tr> </thead> <tfoot> <tr> <th>Name</th> <th>Major</th> <th>Sex</th> <th>English</th> <th>Japanese</th> <th>Calculus</th> <th>Geometry</th> </tr> </tfoot> <tbody> <tr> <td>Student01</td> <td>Languages</td> <td>male</td> <td>80</td> <td>70</td> <td>75</td> <td>80</td> </tr> <tr> <td>Student02</td> <td>Mathematics</td> <td>male</td> <td>90</td> <td>88</td> <td>100</td> <td>90</td> </tr> <tr> <td>Student03</td> <td>Languages</td> <td>female</td> <td>85</td> <td>95</td> <td>80</td> <td>85</td> </tr> <tr> <td>Student04</td> <td>Languages</td> <td>male</td> <td>60</td> <td>55</td> <td>100</td> <td>100</td> </tr> <tr> <td>Student05</td> <td>Languages</td> <td>female</td> <td>68</td> <td>80</td> <td>95</td> <td>80</td> </tr> <tr> <td>Student06</td> <td>Mathematics</td> <td>male</td> <td>100</td> <td>99</td> <td>100</td> <td>90</td> </tr> <tr> <td>Student07</td> <td>Mathematics</td> <td>male</td> <td>85</td> <td>68</td> <td>90</td> <td>90</td> </tr> <tr> <td>Student08</td> <td>Languages</td> <td>male</td> <td>100</td> <td>90</td> <td>90</td> <td>85</td> </tr> <tr> <td>Student09</td> <td>Mathematics</td> <td>male</td> <td>80</td> <td>50</td> <td>65</td> <td>75</td> </tr> <tr> <td>Student10</td> <td>Languages</td> <td>male</td> <td>85</td> <td>100</td> <td>100</td> <td>90</td> </tr> <tr> <td>Student11</td> <td>Languages</td> <td>male</td> <td>86</td> <td>85</td> <td>100</td> <td>100</td> </tr> <tr> <td>Student12</td> <td>Mathematics</td> <td>female</td> <td>100</td> <td>75</td> <td>70</td> <td>85</td> </tr> <tr> <td>Student13</td> <td>Languages</td> <td>female</td> <td>100</td> <td>80</td> <td>100</td> <td>90</td> </tr> <tr> <td>Student14</td> <td>Languages</td> <td>female</td> <td>50</td> <td>45</td> <td>55</td> <td>90</td> </tr> <tr> <td>Student15</td> <td>Languages</td> <td>male</td> <td>95</td> <td>35</td> <td>100</td> <td>90</td> </tr> <tr> <td>Student16</td> <td>Languages</td> <td>female</td> <td>100</td> <td>50</td> <td>30</td> <td>70</td> </tr> <tr> <td>Student17</td> <td>Languages</td> <td>female</td> <td>80</td> <td>100</td> <td>55</td> <td>65</td> </tr> <tr> <td>Student18</td> <td>Mathematics</td> <td>male</td> <td>30</td> <td>49</td> <td>55</td> <td>75</td> </tr> <tr> <td>Student19</td> <td>Languages</td> <td>male</td> <td>68</td> <td>90</td> <td>88</td> <td>70</td> </tr> <tr> <td>Student20</td> <td>Mathematics</td> <td>male</td> <td>40</td> <td>45</td> <td>40</td> <td>80</td> </tr> <tr> <td>Student21</td> <td>Languages</td> <td>male</td> <td>50</td> <td>45</td> <td>100</td> <td>100</td> </tr> <tr> <td>Student22</td> <td>Mathematics</td> <td>male</td> <td>100</td> <td>99</td> <td>100</td> <td>90</td> </tr> <tr> <td>Student23</td> <td>Languages</td> <td>female</td> <td>85</td> <td>80</td> <td>80</td> <td>80</td> </tr> </tbody> </table> <script src="http://www.google-analytics.com/urchin.js" type="text/javascript"> </script> <script type="text/javascript"> _uacct = "UA-2189649-1"; urchinTracker(); </script> </body> </html>