Bootstrap 3.6.6 - Datatable styling

**micanti** · 07/09/2017, 13h08

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
 
/*
 * Initialize bootstrap datatable
 */
$(document).ready(function() {
	$('#resultTable').DataTable();
} );

Merci !

**micanti** · 07/09/2017, 14h32

Pour info.

J'ai trouvé la cause du problème. Je dispose d'une 2e table dans la même JSP dont je modifie le contenu directement via le DOM avec un innerHTML. Il semble que datatable a un sérieux
souci avec ca.

Il ne reste plus qu'à trouver une solution...

**Mell** · 07/09/2017, 14h49

innerHTML remplace l'intérgralité de ta datatable, donc si la pagination est à l'intérieur, elle est écrasée.
Si tu veux seulement ajouter des données dans un tableau, il va falloir faire le innerHTML dans un élément à l'intérieur du datatable

**micanti** · 07/09/2017, 15h58

Merci pour ton retour !

Après avoir passé le code au peigne fin, j'ai remarqué qu'il manquait un header (<th>) dans la table des résultats... et c'est uniquement pour ca que le formattage de la table était bousillé...

Bootstrap 3.6.6 - Datatable styling

Framework CSS Bootstrap

Discussions similaires

Partager

Partager