Les champs datatables au-dessus et en dessous du tableau sont décalés

**moimp** · 12/11/2024, 22h30

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 : 121
Taille : 15,7 Ko

**Pytet** · 13/11/2024, 11h51

Bonjour,

Utilise une balise link à la place de script pour charger le fichier css : https://datatables.net/manual/instal...vascript-/-CSS

**moimp** · 14/11/2024, 00h14

J'ai remplacé les deux lignes en commentaire par les deux suivantes et c'est pire dans le sens où les champs propres à DataTables n'apparaissent plus du tout.

Code :

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

1
2
	<link rel="stylesheet" href="https://cdn.datatables.net/1.13.6/css/jquery.dataTables.min.css">
	<script src="https://cdn.datatables.net/1.13.6/js/jquery.dataTables.min.js"></script>

J'ai aussi essayé l'équivalent avec les liens de la dernière version sans plus de résultat.

**moimp** · 14/11/2024, 20h00

Après reprise des informations de la console et diverses recherches, le problème viendrait de jQuery.
Je ne trouve pas les liens ni comment travailler en CDN avec jQuery, le css et le noyau datatables.
J'ai essayé de travailler avec d'anciennes versions qui fonctionnent sur d'autres sites mais elles ne fonctionnent pas ici. J'ai deux erreurs jQuery dans la console JS.

J'ai aussi essayé de télécharger les dernières versions pour travailler sur mon serveur en local et j'ai les mêmes erreurs.

Messages d'erreurs de la console:

jQuery.Deferred exception: DataTable is not defined ReferenceError: DataTable is not defined
at HTMLDocument.<anonymous> (http://itdocs/:32:15)
at mightThrow (https://code.jquery.com/jquery-3.3.1.js:3534:29)
at process (https://code.jquery.com/jquery-3.3.1.js:3602:12) undefined

Uncaught ReferenceError: DataTable is not defined
at HTMLDocument.<anonymous> ((index):32:15)
at mightThrow (jquery-3.3.1.js:3534:29)
at process (jquery-3.3.1.js:3602:12)

Les champs datatables au-dessus et en dessous du tableau sont décalés

jQuery

Vue hybride

Discussions similaires

Partager

Partager