forked from fooplugins/FooTable
-
Notifications
You must be signed in to change notification settings - Fork 0
/
demo-group-headers.htm
105 lines (93 loc) · 3.12 KB
/
demo-group-headers.htm
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
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<meta name="viewport" content = "width = device-width, initial-scale = 1.0, minimum-scale = 1.0, maximum-scale = 1.0, user-scalable = no" />
<link href="css/footable-0.1.css" rel="stylesheet" type="text/css" />
<link href="css/footable.sortable-0.1.css" rel="stylesheet" type="text/css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js" type="text/javascript"></script>
<script src="js/footable-0.1.js" type="text/javascript"></script>
<script src="js/footable.sortable.js" type="text/javascript"></script>
<script type="text/javascript">
$(function() {
$('table').footable();
});
</script>
<style>
.test-class { background-color: #5BFF82; }
</style>
</head>
<body>
<table class="footable">
<thead>
<tr class="footable-group-row">
<th data-group="group1" colspan="4">Group 1</th>
<th data-group="group2" colspan="5">Group 2</th>
<th data-group="group3" colspan="2">Group 3</th>
</tr>
<tr>
<th data-group="group1" colspan="3" data-hide="phone" data-ignore="true" data-sort-ignore="true"></th>
<th data-group="group1">ID</th>
<th data-group="group2">Date 1</th>
<th data-group="group2" data-hide="phone" colspan="3" data-sort-match="2" data-names="Date 2,Date 3,Date 4" data-class="test-class">Dates 2, 3, 4 (Sorts on 3)</th>
<th data-group="group2" data-hide="phone">Date 5</th>
<th data-group="group3" data-hide="phone,tablet">Note</th>
<th data-group="group3" data-hide="phone,tablet">Section</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<input type="checkbox"/>
</td>
<td>2</td>
<td>
<img src="images/disabled.png" />
</td>
<td>000-003</td>
<td>03/01/2014</td>
<td>10/01/2016</td>
<td>01/01/2014</td>
<td>23/01/2014</td>
<td>18/01/2014</td>
<td> </td>
<td>INT</td>
</tr>
<tr>
<td>
<input type="checkbox"/>
</td>
<td>3</td>
<td>
<img src="images/disabled.png" />
</td>
<td>000-001</td>
<td>03/01/2015</td>
<td>10/01/2015</td>
<td>02/01/2014</td>
<td>24/01/2014</td>
<td>18/01/2015</td>
<td> </td>
<td>INT</td>
</tr>
<tr>
<td>
<input type="checkbox"/>
</td>
<td>1</td>
<td>
<img src="images/disabled.png" />
</td>
<td>000-002</td>
<td>03/01/2016</td>
<td>10/01/2014</td>
<td>03/01/2014</td>
<td>22/01/2014</td>
<td>18/01/2016</td>
<td> </td>
<td>INT</td>
</tr>
</tbody>
</table>
</body>
</html>