NOTE!
- Clicking on any of the sortable header cells will cause all columns below it to sort.
- This demo will only work in tablesorter version 2.3+.
Demo
Sort All Columns |
||||
---|---|---|---|---|
Index |
First Group |
Second Group |
||
Natural Sort |
Numeric |
Animals |
Url |
|
Index | Natural Sort | Numeric | Animals | Url |
0 | abc 123 | 10 | Koala | http://www.google.com |
1 | abc 1 | 234 | Ox | http://www.yahoo.com |
2 | abc 9 | 10 | Girafee | http://www.facebook.com |
3 | zyx 24 | 767 | Bison | http://www.whitehouse.gov/ |
4 | abc 11 | 3 | Chimp | http://www.ucla.edu/ |
5 | abc 2 | 56 | Elephant | http://www.wikipedia.org/ |
6 | abc 9 | 155 | Lion | http://www.nytimes.com/ |
7 | ABC 10 | 87 | Zebra | http://www.google.com |
8 | zyx 1 | 999 | Koala | http://www.mit.edu/ |
9 | zyx 12 | 0 | Llama | http://www.nasa.gov/ |
Javascript
$(function() { $("table").tablesorter({ theme : 'blue' }); });
HTML
<table class="tablesorter"> <thead> <tr> <th colspan="5">Sort All Columns</th> </tr> <tr> <th rowspan="2">Index</th> <th colspan="2">First Group</th> <th colspan="2">Second Group</th> </tr> <tr> <th>Natural Sort</th> <th>Numeric</th> <th id="test">Animals</th> <th>Url</th> </tr> </thead> <tfoot> <tr> <th>Index</th> <th>Natural Sort</th> <th>Numeric</th> <th id="test">Animals</th> <th>Url</th> </tr> </tfoot> <tbody> <tr><td>0</td><td>abc 123</td><td>10</td><td>Koala</td><td>http://www.google.com</td></tr> <tr><td>1</td><td>abc 1</td><td>234</td><td>Ox</td><td>http://www.yahoo.com</td></tr> <tr><td>2</td><td>abc 9</td><td>10</td><td>Girafee</td><td>http://www.facebook.com</td></tr> <tr><td>3</td><td>zyx 24</td><td>767</td><td>Bison</td><td>http://www.whitehouse.gov/</td></tr> <tr><td>4</td><td>abc 11</td><td>3</td><td>Chimp</td><td>http://www.ucla.edu/</td></tr> <tr><td>5</td><td>abc 2</td><td>56</td><td>Elephant</td><td>http://www.wikipedia.org/</td></tr> <tr><td>6</td><td>abc 9</td><td>155</td><td>Lion</td><td>http://www.nytimes.com/</td></tr> <tr><td>7</td><td>ABC 10</td><td>87</td><td>Zebra</td><td>http://www.google.com</td></tr> <tr><td>8</td><td>zyx 1</td><td>999</td><td>Koala</td><td>http://www.mit.edu/</td></tr> <tr><td>9</td><td>zyx 12</td><td>0</td><td>Llama</td><td>http://www.nasa.gov/</td></tr> </tbody> </table>