Bootstrap 3.6.6 - Datatable styling
Bonjour,
je dispose d'une datatable bootstrap pour l'affichage du résultat. La table dispose de plusieurs classes comme la pagination, recherche textuelle ou encore nombre d'occurences à afficher par page.
Lorsque je lance une requête, celle-ci déclenche une action struts 2 et retourne sur la même JSP qui popule la datatable. Le souci est qu'à ce moment même, la table perd tous ces styling, càd,
il n'y a plus de pagination, ni recherche ni quoi que ce soit, uniquement une simple table avec une entête et ces données. (par contre dans le code source de la page, il n'y a pas de différences de style...)
Comment résoudre ce problème ?
Voici mes sources.
JSP parent:
Code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
|
<head>
...
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/dataTables.bootstrap.min.css" rel="stylesheet">
<link href="css/responsive.bootstrap.min.css" rel="stylesheet">
<link href="css/sp-audit.css" rel="stylesheet">
<link href="css/bootstrap-datetimepicker.min.css" rel="stylesheet">
</head>
<body>
<div class="panel panel-primary">
<div class="panel-heading">Résultat</div>
<div class="panel-body">
<div id="table"><%@ include file="/WEB-INF/jsp/result/result.jsp"%></div>
</div></div>
<script type="text/javascript" charset="utf-8" src="js/lib/jquery.js"></script>
<script type="text/javascript" charset="utf-8" src="js/lib/jquery-ui.js"></script>
<script type="text/javascript" charset="utf-8" src="js/lib/moment.min.js"></script>
<script type="text/javascript" charset="utf-8" src="js/lib/jquery.dataTables.min.js"></script>
<script type="text/javascript" charset="utf-8" src="js/lib/bootstrap.min.js"></script>
<script type="text/javascript" charset="utf-8" src="js/lib/bootstrap-datetimepicker.min.js"></script>
<script type="text/javascript" charset="utf-8" src="js/utils.js"></script> |
result.jsp:
Code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
|
<table id="resultTable" class="table table-hover table-striped table-condensed dt-responsive display" width="100%" cellspacing="0">
<thead>
<tr>
<th>ID</th>
<th>LABEL</th>
</tr>
</thead>
<tbody>
<s:iterator value="resultList" var="item" >
<tr>
<td><s:property value="#item.id"/></td>
<td><s:property value="#item.label"/></td>
<td><img src="images/details.png" height="20" width="20"></td>
</tr>
</s:iterator>
</tbody>
</table> |
utils.js
Code:
1
2
3
4
5
6
7
|
/*
* Initialize bootstrap datatable
*/
$(document).ready(function() {
$('#resultTable').DataTable();
} ); |
Merci !
