Skip to content

Commit a49121e

Browse files
tofsjonastofsjonas
committed
generate index.html in /docs
1 parent 3331eb9 commit a49121e

File tree

1 file changed

+214
-0
lines changed

1 file changed

+214
-0
lines changed

‎docs/index.html

Lines changed: 214 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,214 @@
1+
<!doctype html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
7+
<title>sortable test</title>
8+
9+
<link rel="stylesheet" href="../dist/example.css">
10+
</head>
11+
<body>
12+
<h1>Sortable examples</h1>
13+
14+
<h2>Basic sort</h2>
15+
<table class="sortable">
16+
<thead>
17+
<tr>
18+
<th><span>Role</span></th>
19+
<th>Name</th>
20+
</tr>
21+
</thead>
22+
<tbody>
23+
<tr>
24+
<td>Genius</td>
25+
<td>Rick</td>
26+
</tr>
27+
<tr>
28+
<td><a href="javascript:alert('Inline javascript works!');">Sidekick</a></td>
29+
<td><a id="morty" href="#">Morty</a></td>
30+
</tr>
31+
</tbody>
32+
</table>
33+
34+
<h2>Tiebreaker</h2>
35+
<p>Sort by year</p>
36+
37+
<table class="sortable">
38+
<thead>
39+
<tr>
40+
<th data-sort-tbr="2">Month</th>
41+
<th data-sort-tbr="0">Year</th>
42+
<th data-sort-tbr="3">Day</th>
43+
<th>Time</th>
44+
</tr>
45+
</thead>
46+
<tbody>
47+
<tr>
48+
<td>11</td>
49+
<td>2010</td>
50+
<td>25</td>
51+
<td>12:00</td>
52+
</tr>
53+
<tr>
54+
<td>11</td>
55+
<td>2010</td>
56+
<td>25</td>
57+
<td>15:00</td>
58+
</tr>
59+
<tr>
60+
<td>04</td>
61+
<td>2010</td>
62+
<td>12</td>
63+
<td>13:00</td>
64+
</tr>
65+
</tbody>
66+
</table>
67+
<ul style="padding-left: 1.5em; font-style: italic">
68+
<li>If year is the same, sort by month.</li>
69+
<li>If month is the same, sort by day.</li>
70+
<li>If day is the same, sort by time</li>
71+
</ul>
72+
73+
<h2>Colspans</h2>
74+
75+
<table class="sortable sticky">
76+
<thead>
77+
<tr>
78+
<th colspan="2">nums + chars</th>
79+
<th data-sort-col="2">CHARS</th>
80+
</tr>
81+
</thead>
82+
<tbody>
83+
<tr>
84+
<td>333</td>
85+
<td>222</td>
86+
<td>BB</td>
87+
</tr>
88+
<tr>
89+
<td>1</td>
90+
<td>111</td>
91+
<td>CCC</td>
92+
</tr>
93+
<tr>
94+
<td>22</td>
95+
<td>333</td>
96+
<td>A</td>
97+
</tr>
98+
</tbody>
99+
</table>
100+
101+
<h2>Empty/null sorted last</h2>
102+
103+
<table class="sortable n-last lefty">
104+
<thead>
105+
<tr>
106+
<th>Text</th>
107+
<th class="indicator-left">Number</th>
108+
</tr>
109+
</thead>
110+
<tbody>
111+
<tr>
112+
<td>jkl</td>
113+
<td>0.4</td>
114+
</tr>
115+
<tr>
116+
<td>abc</td>
117+
<td>0</td>
118+
</tr>
119+
<tr>
120+
<td>should be sorted last</td>
121+
<td data-sort="">(if click in this column)</td>
122+
</tr>
123+
<tr>
124+
<td>def</td>
125+
<td>0.2</td>
126+
</tr>
127+
</tbody>
128+
</table>
129+
<h2>class="no-sort"</h2>
130+
<table class="sortable">
131+
<thead>
132+
<tr>
133+
<th>Role</th>
134+
<th class="no-sort">Name</th>
135+
</tr>
136+
</thead>
137+
<tbody>
138+
<tr>
139+
<td>Genius</td>
140+
<td>Rick</td>
141+
</tr>
142+
<tr>
143+
<td>Sidekick</td>
144+
<td>Morty</td>
145+
</tr>
146+
</tbody>
147+
</table>
148+
149+
<h2>numeric sorting</h2>
150+
<table class="sortable">
151+
<thead>
152+
<tr>
153+
<th>Role</th>
154+
<th>Time</th>
155+
<th>Amount</th>
156+
<th>Number</th>
157+
</tr>
158+
</thead>
159+
<tbody>
160+
<tr>
161+
<td>Genius</td>
162+
<td>12:00:12</td>
163+
<td>$18.49</td>
164+
<td>2.49</td>
165+
</tr>
166+
<tr>
167+
<td>Sidekick</td>
168+
<td>12:22:11</td>
169+
<td>$2.49</td>
170+
<td>18.49</td>
171+
</tr>
172+
<tr>
173+
<td>Butler</td>
174+
<td>12:22:05</td>
175+
<td>$1.96</td>
176+
<td>1.96</td>
177+
</tr>
178+
</tbody>
179+
</table>
180+
181+
<h2>Ascending sort</h2>
182+
183+
<table class="sortable asc">
184+
<thead>
185+
<tr>
186+
<th><span>Role</span></th>
187+
<th>Name</th>
188+
</tr>
189+
</thead>
190+
<tbody>
191+
<tr>
192+
<td>Genius</td>
193+
<td>Rick</td>
194+
</tr>
195+
<tr>
196+
<td><a href="javascript:alert('Inline javascript works!');">Sidekick</a></td>
197+
<td><a id="morty" href="#">Morty</a></td>
198+
</tr>
199+
</tbody>
200+
</table>
201+
202+
<script>
203+
document.getElementById('morty').addEventListener('click', function (e) {
204+
e.preventDefault()
205+
alert('event listeners also work!')
206+
})
207+
</script>
208+
209+
210+
211+
<script src="../dist/sortable.js"></script>
212+
<script src="../dist/sortable.a11y.js"></script>
213+
</body>
214+
</html>

0 commit comments

Comments
 (0)