Erreurs rencontrées avec DataTables

**moimp** · 20/11/2024, 18h30

Bonjour à tous,

Je rencontre plusieurs erreurs avec DataTables avec le code source suivant:

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
<!DOCTYPE html>
 
<html lang="fr">
 
<head>
	<meta charset="UTF-8">
	<title>Gestion documentation</title>
	<meta name="description" content="Outil de gestion de documentation">
	<meta name="author" content="Marc Paris (moimp)">
 
	<meta http-equiv="Expires" content="-1" >
	<meta http-equiv="cache-control" content="no-cache, no-store, must-revalidate">
 
	<script src="https://code.jquery.com/jquery-3.4.1.js"></script>
	<link rel="stylesheet" href="https://cdn.datatables.net/1.13.6/css/jquery.dataTables.min.css">
	<script src="js/list.js"></script>
 
	<base href="http://itdocs/">
 
	<link rel="stylesheet" media="all" type="text/css" href="css/main.css">
 
	<script>const lang = "fr";</script>
	<script src='js/lang/fr.js'></script>
	<script type='module' src='js/clock.js'></script>
</head>
 
<body>
	<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>
			<li><a href="index.php?page=editCategory">Edition catégorie</a></li>
			<li><a href="index.php?page=list">Liste</a></li>
			<li><a href="index.php?page=list">Liste</a></li>
		</ul>
	</nav>
 
</div>		<article id="right">
			<h3>Liste des documents répertoriés</h3>
 
			<table id="table">
				<thead><tr><th>Sujet</th><th>Titre</th><th>Catégorie</th><th>Catégorie 2</th><th>Emplacement</th><th>Mots clefs</th><th>Mise à jour</th></tr></thead>
					<tbody>
						<tr><td>cellule 1</td><td>cellule 2</td><td>cellule 3</td><td>cellule 4</td><td>cellule 5</td><td>cellule 6</td><td>cellule 7</td></tr>
											</tbody>
				<tfoot><tr><th>Sujet</th><th>Titre</th><th>Catégorie</th><th>Catégorie 2</th><th>Emplacement</th><th>Mots clefs</th><th>Mise à jour</th></tr></tfoot>
			</table>
 
		</article>
	</div>
 
</body>
 
</html>

Code du fichier "js/list.js":

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
 $(document).ready(function() {  			// executed when document is loaded
	//$.fn.dataTable.ext.order.intl('fr');	// french collation, see also https://stackoverflow.com/questions/69004579/in-my-datatable-i-have-a-simple-column-containing-only-simple-strings-but-its
	let table = new DataTable('#table',{
		language: {
			url: "view/lang/fr_dataTables.json",
			},
 
		initComplete: function() {
			$('#table_filter [type="search"]').focus();
		}
	});
});

Les erreurs sont les suivantes:

jQuery.Deferred exception: DataTable is not defined ReferenceError: DataTable is not defined
at HTMLDocument.<anonymous> (http://itdocs/js/list.js:5:14)
at mightThrow (https://code.jquery.com/jquery-3.4.1.js:3557:29)
at process (https://code.jquery.com/jquery-3.4.1.js:3625:12) undefined

Uncaught ReferenceError: DataTable is not defined
at HTMLDocument.<anonymous> (list.js:5:14)
at mightThrow (jquery-3.4.1.js:3557:29)
at process (jquery-3.4.1.js:3625:12)

A quoi correspondent ces erreurs et comment y remédier?

**Toufik83** · 21/11/2024, 13h27

Bonjour,

Envoyé par moimp

A quoi correspondent ces erreurs et comment y remédier?

Apparemment vous n'avez pas chargé le script de DataTable avec la balise <script src="lien vers datatable...."></script>,je ne le vois nulle part dans le code HTML, ce qui provoque l'erreur DataTable is not defined jQuery.Deferred exception: DataTable is not defined ReferenceError: DataTable is not defined

**moimp** · 21/11/2024, 16h11

Je trouve la documentation datables extrêmement touffue et inextricable. Je n'arrive pas à trouver les liens CDN de la dernière version de base pour jQuery, la CSS, et DataTables, compatibles entre elles.

**Toufik83** · 21/11/2024, 16h34

Bonjour,

Pour le CDN, va sur google et écris "datatable cdn" dans la barre de recherche, après cliques sur le deuxième lien datatables - Libraries (ou bibliothèque en français).

tu y trouveras tous les fichiers relatifs au plugin, jQuery/CSS/datatableJS de chaque version, il faudrait donc copier les liens dont tu as besoin à condition que ce soit de la même version.

Il y a deux listes déroulantes en haut de la page, la première permet de choisir la version et la deuxième pour les type des fichiers CSS/JS/Images ou autres...

Pour DataTable il existent des versions avec le style Orienté Objet ou/et procédurales, la première nécessite d'instancier l'objet avec le mot clé new comme var table=new DataTable({/* Options....*/}); et la deuxième non, normale var table=DataTable({/*...*/}), donc tout dépend de la version que tu as utilisé....

**moimp** · 21/11/2024, 21h05

Merci pour ces conseils. Finalement en fouillant bien, j'ai trouvé sur le site officiel de datatables mais je persiste à penser que la documentation datables n'est pas très facile d'approche.

Erreurs rencontrées avec DataTables

jQuery

Vue hybride

Discussions similaires

Partager

Partager