File: with-settings.html

package info (click to toggle)
libjs-jquery-stupidtable 1.1.3%2Bdfsg-2
  • links: PTS, VCS
  • area: main
  • in suites: bookworm, forky, sid, trixie
  • size: 604 kB
  • sloc: javascript: 2,458; makefile: 7
file content (123 lines) | stat: -rw-r--r-- 3,014 bytes parent folder | download | duplicates (2)
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
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
<!DOCTYPE html>
<html>
<head>
  <title>Stupid jQuery table sort</title>
  <script src="/usr/share/javascript/jquery/jquery.min.js"></script>
  <script src="/usr/share/javascript/jquery-stupidtable/stupidtable.js?dev"></script>
  <script>
    // ======================================================
    // Example 1
    // ======================================================
    $(function(){
        var $table = $("#example-1");
        $table.stupidtable_settings({
            should_redraw: function(sort_info){
              var sorted_column = sort_info.column;
              var first_val = sorted_column[0];
              var last_val = sorted_column[sorted_column.length - 1][0];

              // If first and last element of the sorted column are the same, we
              // can assume all elements are the same.
              return sort_info.compare_fn(first_val, last_val) !== 0;
            }
        });
        $table.stupidtable();
    });

  </script>
  <style type="text/css">
    table {
      border-collapse: collapse;
    }
    th, td {
      padding: 5px 10px;
      border: 1px solid #999;
    }
    th {
      background-color: #eee;
    }
    th[data-sort]{
      cursor:pointer;
    }
    tr.awesome{
      color: red;
    }
  </style>
  </style>
</head>

<body>

  <h1>StupidTable with settings</h1>

  <p>This page shows how specific behaviors can be introduced by providing
  settings to StupidTable. View the source of this page to see the settings in
  use.</p>

  <hr/>

  <h2>Example 1</h2>

  <p> This table does not redraw when attempting to sort a column that has identical values in all rows. </p>

  <table id='example-1'>
    <thead>
      <tr>
        <th data-sort="int">int</th>
        <th data-sort="float">float</th>
        <th data-sort="string" data-sort-onload="yes">string</th>
        <th data-sort="int">int (identical)</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>15</td>
        <td>-.18</td>
        <td>banana</td>
        <td>99</td>
      </tr>
      <tr class="awesome">
        <td>95</td>
        <td>36</td>
        <td>coke</td>
        <td>99</td>
      </tr>
      <tr>
        <td>2</td>
        <td>-152.5</td>
        <td>apple</td>
        <td>99</td>
      </tr>
      <tr>
        <td>-53</td>
        <td>88.5</td>
        <td>zebra</td>
        <td>99</td>
      </tr>
      <tr>
        <td>195</td>
        <td>-858</td>
        <td>orange</td>
        <td>99</td>
      </tr>
    </tbody>
  </table>

<pre><code>
var $table = $("#example-1");
$table.stupidtable_settings({
    should_redraw: function(sort_info){
      var sorted_column = sort_info.column;
      var first_val = sorted_column[0];
      var last_val = sorted_column[sorted_column.length - 1][0];

      // If first and last element of the sorted column are the same, we
      // can assume all elements are the same.
      return sort_info.compare_fn(first_val, last_val) !== 0;
    }
});
$table.stupidtable();
</code></pre>

</body>
</html>