tablesorter.html 2.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116
  1. <!DOCTYPE html>
  2. <html>
  3. <!--
  4. Copyright 2010 The Closure Library Authors. All Rights Reserved.
  5. Use of this source code is governed by the Apache License, Version 2.0.
  6. See the COPYING file for details.
  7. -->
  8. <head>
  9. <title>goog.ui.TableSorter</title>
  10. <script src="../base.js"></script>
  11. <script>
  12. goog.require('goog.ui.TableSorter');
  13. </script>
  14. <link rel="stylesheet" href="css/demo.css">
  15. <link rel="stylesheet" href="../css/tablesorter.css">
  16. <style>
  17. /** Each application can choose how to show sorted state.
  18. This is a simple way, just toggling background colors. */
  19. th.goog-tablesorter-sorted {
  20. background-color: #eef;
  21. }
  22. th.goog-tablesorter-sorted-reverse {
  23. background-color: #fee;
  24. }
  25. </style>
  26. </head>
  27. <body>
  28. <h1>goog.ui.TableSorter</h1>
  29. <p>
  30. Number sorts numerically, month sorts alphabetically, and days sorts
  31. numerically in reverse.
  32. </p>
  33. <table border="0" cellpadding="3" id="sortMe">
  34. <thead>
  35. <tr>
  36. <th>Number</th>
  37. <th>Month</th>
  38. <th>Days (non-leap year)</th>
  39. </tr>
  40. </thead>
  41. <tbody>
  42. <tr>
  43. <td>1</td>
  44. <td>January</td>
  45. <td>31</td>
  46. </tr>
  47. <tr>
  48. <td>2</td>
  49. <td>Februrary</td>
  50. <td>28</td>
  51. </tr>
  52. <tr>
  53. <td>3</td>
  54. <td>March</td>
  55. <td>31</td>
  56. </tr>
  57. <tr>
  58. <td>4</td>
  59. <td>April</td>
  60. <td>30</td>
  61. </tr>
  62. <tr>
  63. <td>5</td>
  64. <td>May</td>
  65. <td>31</td>
  66. </tr>
  67. <tr>
  68. <td>6</td>
  69. <td>June</td>
  70. <td>30</td>
  71. </tr>
  72. <tr>
  73. <td>7</td>
  74. <td>July</td>
  75. <td>31</td>
  76. </tr>
  77. <tr>
  78. <td>8</td>
  79. <td>August</td>
  80. <td>31</td>
  81. </tr>
  82. <tr>
  83. <td>9</td>
  84. <td>September</td>
  85. <td>30</td>
  86. </tr>
  87. <tr>
  88. <td>10</td>
  89. <td>October</td>
  90. <td>31</td>
  91. </tr>
  92. <tr>
  93. <td>11</td>
  94. <td>November</td>
  95. <td>30</td>
  96. </tr>
  97. <tr>
  98. <td>12</td>
  99. <td>December</td>
  100. <td>31</td>
  101. </tr>
  102. </tbody>
  103. </table>
  104. <br/>
  105. <script>
  106. var component = new goog.ui.TableSorter();
  107. component.decorate(goog.dom.getElement('sortMe'));
  108. component.setSortFunction(1, goog.ui.TableSorter.alphaSort);
  109. component.setSortFunction(2,
  110. goog.ui.TableSorter.createReverseSort(goog.ui.TableSorter.numericSort));
  111. </script>
  112. </body>
  113. </html>