datatable-example.html - www.codemadness.org - www.codemadness.org saait content files
(HTM) git clone git://git.codemadness.org/www.codemadness.org
(DIR) Log
(DIR) Files
(DIR) Refs
(DIR) README
(DIR) LICENSE
---
datatable-example.html (3767B)
---
1 <html>
2 <head>
3 <title>Datatable example</title>
4 <link rel="stylesheet" type="text/css" href="style.css" />
5 </head>
6 <body>
7 <h2>Example</h2>
8
9 <noscript>
10 <strong>For this example to work you need to have Javascript enabled.</strong>
11 </noscript>
12
13
14 <label for="filter"><strong>Filter:</strong></label>
15 <input type="search" id="filter" class="filter-text" value="" placeholder="Filter..." /><br/>
16 <br/>
17
18 <table id="datatable" class="datatable" cellpadding="0" cellspacing="0" border="0">
19 <thead>
20 <tr>
21 <th class="a-r" data-parse="int">ID</th>
22 <th>Manufacturer</th>
23 <th>Model</th>
24 <th class="a-r" data-parse="int">Cores</th>
25 <th class="a-r sort-disabled" data-sortable="false" data-parse="float">GHZ<br/>(disabled sort)</th><!-- disabled sort -->
26 <th>SKU</th>
27 <th class="a-r" data-parse="int">EAN</th>
28 <th class="a-r" data-parse="int">Stock</th>
29 <th class="a-r" data-parse="float">Price</th>
30 </tr>
31 </thead>
32 <tbody>
33 <tr>
34 <td class="a-r">1</td>
35 <td>Intel</td>
36 <td>Core i7-7700k</td>
37 <td class="a-r">4</td>
38 <td class="a-r">4.2</td>
39 <td>BX80677I77700K</td>
40 <td class="a-r">5032037092562</td>
41 <td class="a-r">5</td>
42 <td class="a-r" data-value="332.2">€ 332.20</td>
43 </tr>
44
45 <tr>
46 <td class="a-r">2</td>
47 <td>Intel</td>
48 <td>Core i9-7900k</td>
49 <td class="a-r">10</td>
50 <td class="a-r">3.3</td>
51 <td>BX80673I97900X</td>
52 <td class="a-r">5032037104791</td>
53 <td class="a-r no-stock">0</td>
54 <td class="a-r" data-value="969.95">€ 969.95</td>
55 </tr>
56
57 <tr>
58 <td class="a-r">3</td>
59 <td>AMD</td>
60 <td>Ryzen 7 1700</td>
61 <td class="a-r">8</td>
62 <td class="a-r">3</td>
63 <td>YD1700BBAEBOX</td>
64 <td class="a-r">0730143308328</td>
65 <td class="a-r">3</td>
66 <td class="a-r" data-value="300.95">€ 300.95</td>
67 </tr>
68
69 <tr>
70 <td class="a-r">4</td>
71 <td>AMD</td>
72 <td>Ryzen 7 1800x</td>
73 <td class="a-r">8</td>
74 <td class="a-r">3.6</td>
75 <td>YD180XBCAEWOF</td>
76 <td class="a-r">0730143308366</td>
77 <td class="a-r">4</td>
78 <td class="a-r" data-value="450.95">€ 450.95</td>
79 </tr>
80
81 <tr>
82 <td class="a-r">5</td>
83 <td>AMD</td>
84 <td>Ryzen 7 1700x</td>
85 <td class="a-r">8</td>
86 <td class="a-r">3.4</td>
87 <td>YD170XBCAEWOF</td>
88 <td class="a-r">0730143308342</td>
89 <td class="a-r">12</td>
90 <td class="a-r" data-value="339.95">€ 339.95</td>
91 </tr>
92
93 <tr>
94 <td class="a-r">6</td>
95 <td>Intel</td>
96 <td>Core i5-7600k</td>
97 <td class="a-r">4</td>
98 <td class="a-r">3.8</td>
99 <td>BX80677I57600K</td>
100 <td class="a-r">0675901428682</td>
101 <td class="a-r">22</td>
102 <td class="a-r" data-value="229">€ 229.00</td>
103 </tr>
104
105 </tbody>
106
107 <tfoot>
108 <tr>
109 <td></td>
110 <td colspan="6">Footer...</td>
111 <td class="a-r" data-value="46">Total: 46</td>
112 <td></td>
113 </tr>
114 </tfoot>
115
116 </table>
117
118 <noscript>
119 <style type="text/css">
120 #datatable {
121 display: table !important;
122 }
123 .filter-text {
124 display: none;
125 }
126 </style>
127 </noscript>
128
129 <link rel="stylesheet" type="text/css" href="datatable.css" />
130 <style type="text/css">
131 th { text-align: left; }
132 .a-r { text-align: right; }
133 .no-stock { background-color: #ffcccc !important; }
134
135 @media (prefers-color-scheme: dark) {
136 .no-stock { background-color: #700 !important; }
137 }
138 </style>
139 <script type="text/javascript" src="datatable.js"></script>
140 <script type="text/javascript">
141 <!--
142 // NOTE: this is specific to this example, normally the simpler function
143 // datatable_autoload() can be used. See the example file.
144
145 var els = document.getElementsByClassName("datatable") || [];
146 var input = document.getElementsByClassName("filter-text")[0];
147 for (var i = 0, d; i < els.length; i++) {
148 if ((d = datatable_init(els[i])) === null)
149 continue;
150
151 input.addEventListener("input", (function(d, el) {
152 return function(e) {
153 datatable_filter_delayed(d, function() {
154 datatable_filter_text(d, el.value);
155 }, e);
156 };
157 })(d, input), false);
158 }
159 -->
160 </script>
161 </body>
162 </html>