Bonjour,
J'ai une table avec DataTables. Les champs propres à DataTables situés au-dessus et en-dessous de la table apparaissent les uns en-dessous des autres sans que je comprenne pourquoi. Je précise qu'il y a toute la place pour qu'il se placent de chaque côté du tableau comme habituellement. Le CSS DataTables n'est visiblement pas appliqué. Je précise que je ne connais pas jQuery que je n'utilise qu'associé à DataTables.
Code source du corps de page:
Code html : 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
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
<body>
	<script src="https://code.jquery.com/jquery-3.3.1.js"</script>
	<script src="https://cdn.datatables.net/1.13.6/css/jquery.dataTables.min.css"></script>
	<script src="https://cdn.datatables.net/1.13.6/js/jquery.dataTables.min.js"></script>
	<script src="https://cdn.datatables.net/plug-ins/1.10.25/sorting/intl.js"></script>		<!-- see documentation here: https://datatables.net/blog/2017-02-28 -->
	<script>
        $(document).ready(function() {                          // executed when document is loaded
                $.fn.dataTable.ext.order.intl('fr');    // french collation
                let table = new DataTable('#table',{
                        language: {
                                url: "view/lang/fr_dataTables.json",
                                },
                        // three next lines don't work with or without quotes (")
                        /*
                        "lengthChange": true,
                        //pageLength: 10,
                        "lengthMenu": [ 10, 25, 50, 75, 100 ],
                        */
 
                        initComplete: function() {
                                $('#table_filter [type="search"]').focus();
                        }
                });
        });
        </script>
 
	<header>
	<div class="displTimer">
		<span id="timer"></span> 	</div>
	<h1>Gestionnaire de documentation</h1>
</header>
	<div class="mainSection">
		<div id="left">
	<nav>
		<ul>
			<li><a href="index.php?page=list">Liste</a></li>
			<li><a href="index.php?page=editDoc">Edition document</a></li>
		</ul>
	</nav>
 
</div>		<div id="right">
			<h2>Liste des documents</h2>
			<p class="note">Cliquez sur l'emplacement pour accéder au document.</p>
 
			<form method="post" action="pageHandler.php">
				<input type="hidden" name="form" value="list">
				<p><input type="submit" name="new" value="Nouveau"></p>
			</form>
 
			<table id="table" class="nowrap smallFont08">
				<thead><tr><th>Sujet</th><th>Titre</th><th>Catégorie</th><th>Catégorie 2</th><th>Emplacement</th><th>Mise à jour</th></tr></thead>
				<tbody>
					<tr id='0'><td>Champs de formulaire</td><td>form>label</td><td>css</td><td>form</td><td><a href='documents/labels.pdf'>documents/labels.pdf</a><br><a href='https://www.developpez.net/forums/d2171497/webmasters-developpement-web/mise-page-css/centrer-texte-verticalement-label/'>https://www.developpez.net/forums/d2171497/webmasters-developpement-web/mise-page-css/centrer-texte-verticalement-label/</a></td><td>12/11/2024</td></tr>				</tbody>
				<tfoot></tfoot>
			</table>
 
			<form method="post" action="pageHandler.php">
				<input type="hidden" name="form" value="list">
				<p><input type="submit" name="new" value="Nouveau"></p>
			</form>
 
		</div>
	</div>
 
</body>
Extrait de la table réduite à une seule ligne:
Nom : Capture d’écran 2024-11-12 212127.png Affichages : 80 Taille : 15,7 Ko