Discussion :

[moimp]

Bonjour à tous,

En vue de centraliser mon fichier langue et de faciliter la maintenance, je souhaite transférer une constante objet JS de PHP dans le fichier script JS.
Définition de la constante à transférer:

Code php :

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
define('DATA_TABLE_MSG', 
<<<DT_OBJ
	language: {
		processing:		"Traitement en cours...",
		search:			"Rechercher&nbsp;:",
		lengthMenu:		"Afficher&nbsp;&nbsp; _MENU_ lignes.",									/*"Afficher _MENU_ &eacute;l&eacute;ments",*/
		info:			"Affichage des lignes _START_ &agrave; _END_ sur un total de _TOTAL_",	/*"Affichage de l'&eacute;lement _START_ &agrave; _END_ sur _TOTAL_ &eacute;l&eacute;ments",*/
		infoEmpty:		"Affichage de la ligne 0 &agrave; 0 sur un total de 0",					/*"Affichage de l&apos;&eacute;lement 0 &agrave; 0 sur 0 &eacute;l&eacute;ments",*/
		infoFiltered:	"(filtr&eacute; d'un total de _MAX_ lignes)",							/*"(filtr&eacute; de _MAX_ &eacute;l&eacute;ments au total)",*/
		infoPostFix:	"",
		loadingRecords:	"Chargement en cours...",
		zeroRecords:	"Aucune ligne à afficher",												/*"Aucun &eacute;l&eacute;ment &agrave; afficher",*/
		emptyTable:		"Tableau vide",
		paginate: {
			first:		"&lt;&lt;",	/*"Premier"*/
			previous:	"&lt;",		/*"Pr&eacute;c&eacute;dent"*/
			next:		"&gt;",		/*"Suivant"*/
			last:		"&gt;&gt;"	/*"Dernier"*/
		},
		aria: {
			sortAscending:  ": activer pour trier la colonne par ordre croissant",
			sortDescending: ": activer pour trier la colonne par ordre décroissant"
		}
	}
DT_OBJ
);

Code html :

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

1
2
3
<script>
        const language = <?= DATA_TABLE_MSG; ?>;
</script>

Code JavaScript :

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
// Nouvelle version
$('#table').DataTable( { language } );
console.log(language);
 
// Version d'origine
// Traductions française (les lignes en commentaire correspondent à la traduction officielle de DataTable)
/*
$('#table').DataTable( {
	language: {
		processing:		"Traitement en cours...",
		search:			"Rechercher :",
		lengthMenu:		"Afficher   _MENU_ lignes.",									//"Afficher _MENU_ éléments",
		info:			"Affichage des lignes _START_ à _END_ sur un total de _TOTAL_",	//"Affichage de l'élement _START_ à _END_ sur _TOTAL_ éléments",
		infoEmpty:		"Affichage de la ligne 0 à 0 sur un total de 0",					//"Affichage de l'élement 0 à 0 sur 0 éléments",
		infoFiltered:	"(filtré d'un total de _MAX_ lignes)",							//"(filtré de _MAX_ éléments au total)",
		infoPostFix:	"",
		loadingRecords:	"Chargement en cours...",
		zeroRecords:	"Aucune ligne à afficher",												//"Aucun élément à afficher",
		emptyTable:		"Tableau vide",
		paginate: {
			first:		"<<",	//"Premier"
			previous:	"<",		//"Précédent"
			next:		">",		//"Suivant"
			last:		">>"	//"Dernier"
		},
		aria: {
			sortAscending:  ": activer pour trier la colonne par ordre croissant",
			sortDescending: ": activer pour trier la colonne par ordre décroissant"
		}
	}
} );
*/

EDIT: Ajout des erreurs signalées dans la console:
';' attendu dans le fichier source PHP à la ligne const language = language: {.
':' attendu dans le fichier JS à la ligne $('#table').DataTable( { language } );.
Sur ce dernier point, si je mets les ':', j'ai une erreur de syntaxe.

[Toufik83]

Salut,
si tu mets ton code php entre guillemets :

Code js :

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

1
2
3
4
 
const language = "<?= DATA_TABLE_MSG; ?>";
//ou
const language = "<?php echo DATA_TABLE_MSG; ?>";

tu as toujours les mêmes erreurs dans la console ?

Dans DataTable, il est possible aussi d'utiliser le paramètre url de language Voir la documentation, tout les fichiers .lang sont en bas de la page, tu peux les stocker localement et les appeler depuis l'url.

[moimp]

Merci d'avoir répondu.
Avec les guillemets les erreurs sont les mêmes.
Les liens que tu indiques ne fonctionnent pas. Je dois regarder plus avant mais j'ai déjà constaté que le nom des attributs sont différents. Ce doit être un problème de version.
J'ai plusieurs vérifications à faire avant de continuer cette discussion.

EDIT: Je pense qu'il vaudrait mieux utiliser les fichiers fournis en plugin. Par contre, il y a visiblement un problème de version:

• Les plugins de langue ne sont pas numérotés.
• La version disponible en téléchargement est la 1.10.18 donc antérieure à la mienne que j'appelle avec le lien: 'https://cdn.datatables.net/1.10.19/js/jquery.dataTables.js'.
• Les attributs ne portent pas le même nom (exemple: processing sur la version stockée sur mon site devient sProcessing sur le plugin à télécharger) ⁽¹⁾
• Il y a plus d'attributs sur le plugin à télécharger que sur ma version stockée.
• Je n'ai pas envie de changer de version, vu que j'ai stocké et personnalisé la feuille de style sur mon site.

⁽¹⁾ Je peux bien sûr modifier le nom des attributs sur les fichiers téléchargés, mais c'est lourd pour la maintenance.

[moimp]

Dans DataTable, il est possible aussi d'utiliser le paramètre url de language Voir la documentation, tout les fichiers .lang sont en bas de la page, tu peux les stocker localement et les appeler depuis l'url.

J'ai essayé d'incorporer les fichiers langue fournis par DataTables dans mon site. J'ai été obligé de les bricoler car il ne correspondent pas à ma version 1.10.19 plus récente que celle du site. Malheureusement, ça ne fonctionne pas et mes messages apparaissent en Anglais. De plus je ne comprends pas pourquoi les versions allemande et française n'ont pas les mêmes propriétés.

EDIT: Oups, j'ai oublié de joindre mes scripts!
Fichier 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
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
 
// Section DataTable
// .............................................................................................
    $(document).ready(function() {
        $('#table').dataTable( {
            "language": {
                //"url": "dataTables.german.lang"
				"url": "lang/fr_datable"
            }
        } );
    } );
 
/*
// Affectation de DataTable au tableau
$(document).ready( function () {
    $('#table').DataTable();
} );
 
// Version d'origine
// Traductions française (les lignes en commentaires correpondent à la traduction officielle de DataTable)
// ATTENTION DANS LES FICHIERS FOURNIS SUR LE SITE IL Y A DES GUILLEMETS SUR LES NOMS D'ATTRIBUTS
$('#table').DataTable( {
	language: {
		processing:		"Traitement en cours...",
		search:			"Rechercher :",
		lengthMenu:		"Afficher   _MENU_ lignes.",									//"Afficher _MENU_ éléments",
		info:			"Affichage des lignes _START_ à _END_ sur un total de _TOTAL_",	//"Affichage de l'élement _START_ à _END_ sur _TOTAL_ éléments",
		infoEmpty:		"Affichage de la ligne 0 à 0 sur un total de 0",					//"Affichage de l'élement 0 à 0 sur 0 éléments",
		infoFiltered:	"(filtré d'un total de _MAX_ lignes)",							//"(filtré de _MAX_ éléments au total)",
		infoPostFix:	"",
		loadingRecords:	"Chargement en cours...",
		zeroRecords:	"Aucune ligne à afficher",												//"Aucun élément à afficher",
		emptyTable:		"Tableau vide",
		paginate: {
			first:		"<<",	//"Premier"
			previous:	"<",		//"Précédent"
			next:		">",		//"Suivant"
			last:		">>"	//"Dernier"
		},
		aria: {
			sortAscending:  ": activer pour trier la colonne par ordre croissant",
			sortDescending: ": activer pour trier la colonne par ordre décroissant"
		}
	}
} );
*/
 
 
document.addEventListener("DOMContentLoaded", function(event) {
	var search = document.querySelector("input[type='search']");
	search.focus();
});

Fichier langue:

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
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
{
    "processing":     "Traitement en cours...",
    "search":         "Rechercher :",
    "lengthMenu":     "Afficher _MENU_ éléments",
    "info":           "Affichage de l'élément _START_ à _END_ sur _TOTAL_ éléments",
    "infoEmpty":      "Affichage de l'élément 0 à 0 sur 0 élément",
    "infoFiltered":   "(filtré de _MAX_ éléments au total)",
    "infoPostFix":    "",
    "loadingRecords": "Chargement en cours...",
    "zeroRecords":    "Aucun élément à afficher",
    "emptyTable":     "Aucune donnée disponible dans le tableau",
    "paginate": {
        "first":      "<<",	//"Premier"
        "previous":   "<",		//"Précédent"
        "next":       ">",		//"Suivant"
        "last":       ">>"	//"Dernier"
    },
    "aria": {
        "sortAscending":  ": activer pour trier la colonne par ordre croissant",
        "sortDescending": ": activer pour trier la colonne par ordre décroissant"
    }
}
 
 
/*
{
    processing:     "Traitement en cours...",
    search:         "Rechercher :",
    lengthMenu:     "Afficher _MENU_ éléments",
    info:           "Affichage de l'élément _START_ à _END_ sur _TOTAL_ éléments",
    infoEmpty:      "Affichage de l'élément 0 à 0 sur 0 élément",
    infoFiltered:   "(filtré de _MAX_ éléments au total)",
    infoPostFix:    "",
    loadingRecords: "Chargement en cours...",
    zeroRecords:    "Aucun élément à afficher",
    emptyTable:     "Aucune donnée disponible dans le tableau",
    paginate: {
        first:      "<<",	//"Premier"
        previous:   "<",		//"Précédent"
        next:       ">",		//"Suivant"
        last:       ">>"	//"Dernier"
    },
    aria: {
        sortAscending:  ": activer pour trier la colonne par ordre croissant",
        sortDescending: ": activer pour trier la colonne par ordre décroissant"
    }
}
*/

[SpaceFrog]

ton langage doit arriver dans ton js sous forme de json corretement formaté ..
Que vois tu dans le code html source de ta page ?

Code :

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

const language = "<?php echo DATA_TABLE_MSG; ?>";

regarde peut être du coté de json_encode ...

[moimp]

Tu as répondu avant que j'édite le point précédent. J'ai abandonné l'idée de transférer depuis PHP. Je cherche à adopter les fichiers langue du site DataTables mais du fait des changement de versions j'ai les soucis signalés plus haut #4.

[Invité]

Bonjour,

1- Ce n'est pas compliqué : il faut créer un objet.
Il ne manque que les {... } autour :

Code :

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

	const language = {<?= DATA_TABLE_MSG; ?>};

On obtient :

Code :

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

1
2
3
4
5
	console.log( language.language.processing );
	console.log( language.language.infoEmpty );
	console.log( language.language.paginate.previous );
	console.log( language.language.aria.sortAscending );
...

N.B. language.language.... :

• le 1er est le nom de la variable JS
• le 2ème est contenu dans la constante PHP

2- Sinon, on peut éviter la répétition language.language.... avec une CONSTANTE PHP légèrement modifiée.

Code php :

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

1
2
3
4
5
6
7
8
9
10
11
12
<?php
define('DATA_TABLE_MSG', 
<<<DT_OBJ
	{
		processing:		"Traitement en cours...",
		search:			"Rechercher&nbsp;:",
		...
		...
	}
DT_OBJ
);
?>

Du coup, les {...} y sont déjà :

Code JavaScript :

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

1
2
3
4
5
6
	const language = <?= DATA_TABLE_MSG; ?>;
 
	console.log( language.processing );
	console.log( language.infoEmpty );
	console.log( language.paginate.previous );
	console.log( language.aria.sortAscending );

[Toufik83]

Avec la version 1.10.19 et en utilisant des fichiers langage différents, le résultat est bon.

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
66
67
68
69
70
71
72
 
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>DataTable</title>
		<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.css">
		<style>
                        body{
                                background:#ddd;
                        }
 
                        table {
                                  white-space:nowrap;
                                  border-collapse:collapse;
                                  table-layout:fixed; 
                                  user-select:none;
                                  width:100%;
                                  border:1px solid #ccc;
                        }
 
                        th {
                                  text-overflow:ellipsis;
                                  background:#444;
                                  border:1px solid #ccc;
                                  color:#eee;
                        }
 
                        td {
                                  text-overflow:ellipsis;
                                  border:1px solid #ccc;
                                  text-align:center;
                        } 
                        
                </style>
  <script
  src="https://code.jquery.com/jquery-3.3.1.js"
  integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60="
  crossorigin="anonymous"></script> 
<script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.js"></script>
            <script>
                        $(function(){
                                var table=$("#datatable").DataTable({
                                        language:{url: "dataTables.italian.json"},
                                        sort:true,
                                        pageLength:5,
                                        paging:true,
                                        scrollY: 200,
                                        data:[
                                                 ["nom 1","prenom 1","num 1"]
                                                ,["nom 2",'prenom 2','num 2']
                                                ,["nom 3",'prenom 3','num 3']
                                                ,["nom 4",'prenom 4','num 4']
                                                ,["nom 5",'prenom 5','num 5']
                                                ,["nom 6",'prenom 6','num 6']
                                                ,["nom 7",'prenom 7','num 7']
                                                ,["nom 8",'prenom 8','num 8']
                                                ,["nom 9",'prenom 9','num 9']
                                        ],
                                        sDom       : 'ltipr'
                                });
                        });
                </script>
	</head>
	<body>
		<table id="datatable" class="table table-striped table-bordered">
			<thead><tr><th>Nom</th>
			<th>Prenom</th>
			<th>Num</th></tr></thead>
		</table>
	</body>
</html>

dataTables.italian.json :

Code json :

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
 
{
    "sEmptyTable":     "Nessun dato presente nella tabella",
    "sInfo":           "Vista da _START_ a _END_ di _TOTAL_ elementi",
    "sInfoEmpty":      "Vista da 0 a 0 di 0 elementi",
    "sInfoFiltered":   "(filtrati da _MAX_ elementi totali)",
    "sInfoPostFix":    "",
    "sInfoThousands":  ".",
    "sLengthMenu":     "Visualizza _MENU_ elementi",
    "sLoadingRecords": "Caricamento...",
    "sProcessing":     "Elaborazione...",
    "sSearch":         "Cerca:",
    "sZeroRecords":    "La ricerca non ha portato alcun risultato.",
    "oPaginate": {
        "sFirst":      "Inizio",
        "sPrevious":   "Precedente",
        "sNext":       "Successivo",
        "sLast":       "Fine"
    },
    "oAria": {
        "sSortAscending":  ": attiva per ordinare la colonna in ordine crescente",
        "sSortDescending": ": attiva per ordinare la colonna in ordine decrescente"
    }
}

dataTables.french.json

Code json :

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
 
{
    "decimal":        "",
    "emptyTable":     "aucun résultat n'a été trouvé (vide)",
    "info":           "Affichage de _START_ à _END_ des _TOTAL_ entrées",
    "infoEmpty":      "Affichage de 0 to 0 de 0 entrée",
    "infoFiltered":   "(filtration de _MAX_  sur total entrées)",
    "infoPostFix":    "",
    "thousands":      ",",
    "lengthMenu":     "Affiche _MENU_ entrées",
    "loadingRecords": "Chargement...",
    "processing":     "Procès...",
    "search":         "Recherche:",
    "zeroRecords":    "aucun résultat n'a été trouvé",
    "paginate": {
        "first":      "Début",
        "last":       "Fin",
        "next":       "Suivant",
        "previous":   "Précedent"
    },
    "aria": {
        "sortAscending":  ": activate to sort column ascending",
        "sortDescending": ": activate to sort column descending"
    }
}

Tu vois bien que la langue italienne est activée, et si tu active la langue française ça fonctionne aussi.

[moimp]

Ton code fonctionne bien. Il me reste un souci: L'écouteur suivant ne fonctionne plus. Avant l'intégration des fichiers de langue, il fonctionnait parfaitement. La variable 'search' vaut maintenant null alors que le champ de recherche figure bien dans le DOM.

Code :

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

1
2
3
4
5
document.addEventListener("DOMContentLoaded", function(event) {
	var search = document.querySelector("input[type='search']");
	alert(search);
	//search.focus();
});

[Toufik83]

Essaie de mettre le code dans $(function) :

Code js :

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

1
2
3
4
5
6
 
$(function(){
	var search = $("input[type='search']");
	alert(search);//vaut mieux utiliser console.log 
	var table=$("#datatable").DataTable({/*....*/});
});

[moimp]

Je ne comprends pas ce code. Il faut dire que je ne connais pas jQuery. Dans ma question search.focus() est en commentaire, à cause de l'erreur que cette ligne provoque mais le seul but de cet écouteur est de mettre le focus sur ce champ. Je ne comprends pas à quoi correspond ta dernière ligne qui semble n'avoir rien à voir avec ma question.

[Toufik83]

Je ne comprends pas à quoi correspond ta dernière ligne qui semble n'avoir rien à voir avec ma question.

Tu veux attacher un événement au document et tu as mis :

Code js :

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

1
2
3
4
5
6
 
document.addEventListener("DOMContentLoaded", function(event) {
	var search = document.querySelector("input[type='search']");
	alert(search);
	//search.focus();
});

Dès que le document soit prêt, javascript exécute ce code.

En jQuery l'équivalent de (dès que le document soit prêt) est :

Code js :

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

$(function(){/*  code à exécuter, dès que le document est prêt (chargé)...*/});

ou :

Code js :

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

$(document).ready(function(){/* code à exécuter, dès que le document est prêt (chargé)*/});

Donc tu mets ton code dans cette fonction et c'est tout.

Code js :

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

1
2
3
4
5
6
 
$(function(){
   var search=$("input[type='search']");
   console.log(search);
   search.focus();
});

[moimp]

Tes explications sont claires. Je n'ai plus d'erreur comme avec l'écouteur en js pur (#9). Par contre le champ ne reçoit toujours pas le focus.

[Toufik83]

Et si tu utilise un setTimeout? exemple :

Code js :

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

1
2
3
4
5
 
setTimeout(function(){//execute ces instructions après 200ms du chargement de la page.
	var search = $("input[type='search']");
	console.log(search);
	search.focus();},200);

[moimp]

Merci, ça ne marche pas avec 200 ms mais avec 500 oui. Je trouve cependant que ça tient du bricolage.

[Toufik83]

Puisque l'input est généré par le plugin DataTable, ça prends un peu de temps (des millisecondes) pour le créer.
c'est pour cela que tu es obligé d'utiliser un setTimeout.

[moimp]

Oui, j'avais compris, mais, intellectuellement, j'aurais préféré contrôler de façon certaine que le script DataTable était exécuté. Encore merci.

[Toufik83]

Si tu ne veux plus utiliser setTimeout, DataTable contient le callback initComplete

Code js :

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

1
2
3
4
5
6
7
8
9
 
$("#table").DataTable({
          ...,
          ...,
          initComplete: function(settings, json) {
	      var search = $("input[type='search']");
	      search.focus();
          }					
});