123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116 |
- <!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>
|