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