/
bootstrap3-activation.html
59 lines (54 loc) · 2.25 KB
/
bootstrap3-activation.html
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
<div class="row row-intro">
<div class="col-md-12">
<h3>Bootstrap 3 theme</h3>
<p>This example shows how easily the Bootstrap framework can be integrated.</p>
<p>Note that we made the black row in the thead disappear. To do that, we used the
Dandelion JSP taglib to modify the active scopes by excluding the Datatables' CSS as
follows:</p>
<p>
<code><dandelion:assets excludedAssets="datatables-css" /></code>
</p>
<p>
As a consequence, we lost the sorting icons. But you could of course get them back by using
custom CSS. See the <a
href="http://dandelion.github.io/components/datatables/tutorials/styling/themes/bootstrap2.html">documentation</a>
for more details.
</p>
</div>
</div>
<div class="row" ddl:css-excludes="datatables">
<div class="col-md-12">
<div dt:conf="myTableId">
<div dt:confType="extrahtml" dt:uid="0" dt:cssStyle="float:right;">
<a href="#" class="btn">Toto</a>
</div>
<div dt:confType="export" dt:type="csv" dt:cssClass="btn btn-default btn-sm" />
</div>
<table id="myTableId" dt:table="true" dt:theme="bootstrap3" class="table table-striped table-bordered table-condensed" dt:export="csv">
<thead>
<tr>
<th>Id</th>
<th>LastName</th>
<th>FirstName</th>
<th>City</th>
<th>Mail</th>
<th>Salary</th>
<th>Birthdate</th>
<th>Company</th>
</tr>
</thead>
<tbody>
<tr th:each="person : ${persons}">
<td th:text="${person?.id}">1</td>
<td th:text="${person?.lastName}">Doe</td>
<td th:text="${person?.firstName}">John</td>
<td th:text="${person?.address?.town?.name}">Nobody knows!</td>
<td th:text="${person?.mail}">john@doe.com</td>
<td th:text="${'€' + person?.salary}">€1000</td>
<td th:text="${#dates.format(person?.birthDate, 'dd-MM-yyyy')}">23-10-1980</td>
<td th:text="${person?.company?.name}">Amazon</td>
</tr>
</tbody>
</table>
</div>
</div>