DataTable: Transférer le fichier langue de PHP à JS

Version imprimable

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:

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:

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

Code:

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&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"
		}
	}
} );
*/

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.

10/03/2019, 20h22
Toufik83
Salut,
si tu mets ton code php entre guillemets :
Code:

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.
11/03/2019, 09h14
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.

Citation:

Envoyé par Toufik83

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:

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&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"
		}
	}
} );
*/
 
 
document.addEventListener("DOMContentLoaded", function(event) {
	var search = document.querySelector("input[type='search']");
	search.focus();
});

Fichier langue:

Code:

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&nbsp;:",
    "lengthMenu":     "Afficher _MENU_ &eacute;l&eacute;ments",
    "info":           "Affichage de l'&eacute;l&eacute;ment _START_ &agrave; _END_ sur _TOTAL_ &eacute;l&eacute;ments",
    "infoEmpty":      "Affichage de l'&eacute;l&eacute;ment 0 &agrave; 0 sur 0 &eacute;l&eacute;ment",
    "infoFiltered":   "(filtr&eacute; de _MAX_ &eacute;l&eacute;ments au total)",
    "infoPostFix":    "",
    "loadingRecords": "Chargement en cours...",
    "zeroRecords":    "Aucun &eacute;l&eacute;ment &agrave; afficher",
    "emptyTable":     "Aucune donn&eacute;e disponible dans le tableau",
    "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&eacute;croissant"
    }
}
 
 
/*
{
    processing:     "Traitement en cours...",
    search:         "Rechercher&nbsp;:",
    lengthMenu:     "Afficher _MENU_ &eacute;l&eacute;ments",
    info:           "Affichage de l'&eacute;l&eacute;ment _START_ &agrave; _END_ sur _TOTAL_ &eacute;l&eacute;ments",
    infoEmpty:      "Affichage de l'&eacute;l&eacute;ment 0 &agrave; 0 sur 0 &eacute;l&eacute;ment",
    infoFiltered:   "(filtr&eacute; de _MAX_ &eacute;l&eacute;ments au total)",
    infoPostFix:    "",
    loadingRecords: "Chargement en cours...",
    zeroRecords:    "Aucun &eacute;l&eacute;ment &agrave; afficher",
    emptyTable:     "Aucune donn&eacute;e disponible dans le tableau",
    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&eacute;croissant"
    }
}
*/

13/03/2019, 11h45
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:

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

regarde peut être du coté de json_encode ...
13/03/2019, 11h54
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.

Bonjour,

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

Code:

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

On obtient :
Code:

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:

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 :", ... ... } DT_OBJ ); ?>
Du coup, les {...} y sont déjà :
Code:

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 );

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

Code:

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:

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:

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.

13/03/2019, 16h19
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:

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

Essaie de mettre le code dans $(function) :

Code:

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

13/03/2019, 17h59
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.
13/03/2019, 18h14
Toufik83
Citation:

Envoyé par moimp

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:

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:

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

ou :

Code:

$(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:

1 2 3 4 5 6 $(function(){ var search=$("input[type='search']"); console.log(search); search.focus(); });
14/03/2019, 09h30
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.

Et si tu utilise un setTimeout? exemple :

Code:

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);

14/03/2019, 17h06
moimp

Merci, ça ne marche pas avec 200 ms mais avec 500 oui. Je trouve cependant que ça tient du bricolage.
14/03/2019, 17h10
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.
14/03/2019, 17h15
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.

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

Code:

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