| <!DOCTYPE html> |
| <html> |
| <!-- |
| Copyright 2010 The Closure Library Authors. All Rights Reserved. |
| |
| Use of this source code is governed by the Apache License, Version 2.0. |
| See the COPYING file for details. |
| --> |
| <head> |
| <title>goog.ui.TableSorter</title> |
| <script src="../base.js"></script> |
| <script> |
| goog.require('goog.ui.TableSorter'); |
| </script> |
| <link rel="stylesheet" href="css/demo.css"> |
| <link rel="stylesheet" href="../css/tablesorter.css"> |
| <style> |
| /** Each application can choose how to show sorted state. |
| This is a simple way, just toggling background colors. */ |
| |
| th.goog-tablesorter-sorted { |
| background-color: #eef; |
| } |
| |
| th.goog-tablesorter-sorted-reverse { |
| background-color: #fee; |
| } |
| </style> |
| </head> |
| <body> |
| <h1>goog.ui.TableSorter</h1> |
| <p> |
| Number sorts numerically, month sorts alphabetically, and days sorts |
| numerically in reverse. |
| </p> |
| <table border="0" cellpadding="3" id="sortMe"> |
| <thead> |
| <tr> |
| <th>Number</th> |
| <th>Month</th> |
| <th>Days (non-leap year)</th> |
| </tr> |
| </thead> |
| <tbody> |
| <tr> |
| <td>1</td> |
| <td>January</td> |
| <td>31</td> |
| </tr> |
| <tr> |
| <td>2</td> |
| <td>Februrary</td> |
| <td>28</td> |
| </tr> |
| <tr> |
| <td>3</td> |
| <td>March</td> |
| <td>31</td> |
| </tr> |
| <tr> |
| <td>4</td> |
| <td>April</td> |
| <td>30</td> |
| </tr> |
| <tr> |
| <td>5</td> |
| <td>May</td> |
| <td>31</td> |
| </tr> |
| <tr> |
| <td>6</td> |
| <td>June</td> |
| <td>30</td> |
| </tr> |
| <tr> |
| <td>7</td> |
| <td>July</td> |
| <td>31</td> |
| </tr> |
| <tr> |
| <td>8</td> |
| <td>August</td> |
| <td>31</td> |
| </tr> |
| <tr> |
| <td>9</td> |
| <td>September</td> |
| <td>30</td> |
| </tr> |
| <tr> |
| <td>10</td> |
| <td>October</td> |
| <td>31</td> |
| </tr> |
| <tr> |
| <td>11</td> |
| <td>November</td> |
| <td>30</td> |
| </tr> |
| <tr> |
| <td>12</td> |
| <td>December</td> |
| <td>31</td> |
| </tr> |
| </tbody> |
| </table> |
| <br/> |
| <script> |
| var component = new goog.ui.TableSorter(); |
| component.decorate(goog.dom.getElement('sortMe')); |
| component.setSortFunction(1, goog.ui.TableSorter.alphaSort); |
| component.setSortFunction(2, |
| goog.ui.TableSorter.createReverseSort(goog.ui.TableSorter.numericSort)); |
| </script> |
| </body> |
| </html> |
