Stupid-Table-Plugin/complex_example.html at master · mtlevolio/Stupid-Table-Plugin · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
<html>
  <head>
    <title>Stupid jQuery table sort</title>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
    <script type="text/javascript" src="stupidtable.min.js?dev"></script>
    <script type="text/javascript">
      $(function(){
          $("table").stupidtable({
            "date":function(a,b){
              // Get these into date objects for comparison.
              var date_from_string = function(str){
                var months = ["jan","feb","mar","apr","may","jun","jul",
                              "aug","sep","oct","nov","dec"];
                var pattern = "^([a-zA-Z]{3})\\s*(\\d{2}),\\s*(\\d{4})$";
                var re = new RegExp(pattern);
                var DateParts = re.exec(str).slice(1);

                var Year = DateParts[2];
                var Month = $.inArray(DateParts[0].toLowerCase(), months);
                var Day = DateParts[1];
                return new Date(Year, Month, Day);
              }

              aDate = date_from_string(a);
              bDate = date_from_string(b);

              return aDate - bDate;
            }
          });

          $("tr").slice(1).click(function(){
            $(".awesome").removeClass("awesome");
            $(this).addClass("awesome");
          });

      });
    </script>
    <style type="text/css">
      tr.awesome{
        color: red;
      }
      th[class|="type"]{
        cursor:pointer;
      }
    </style>
  </head>
  <body>
    <h1>Stupid jQuery table sort!</h1>
    <table border="1">
      <thead>
        <tr>
          <th class="type-int awesome">int</th>
          <th class="type-float">float</th>
          <th class="type-string">string</th>
          <th>Can't sort me!</th>
          <th class="type-date">date</th>
          <th class="type-int">Letter frequency</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>15</td> <td>-.18</td> <td>banana</td> <td>arbitrary</td>
          <td>Mar 15, 1986</td><td data-order-by="2">T</td>
        </tr>
        <tr class="awesome">
          <td>95</td> <td>36</td> <td></td> <td>pointless</td>
          <td>Feb 27, 2086</td> <td data-order-by="1">E</td>
        </tr>
        <tr>
          <td>2</td> <td>-152.5</td> <td></td> <td>silly</td>
          <td>Aug 07, 2004</td><td data-order-by="3">A</td>
        </tr>
        <tr>
          <td>-53</td> <td>88.5</td> <td></td> <td>eccentric</td>
          <td>Sep 15, 2002</td><td data-order-by="5">I</td>

        </tr>
        <tr>
          <td>195</td> <td>-858</td> <td>orange</td> <td>garbage</td>
          <td>Mar 15, 1986</td><td data-order-by="4">O</td>
        </tr>
      </tbody>

    </table>
  </body>
</html>