IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

jQuery Discussion :

[DataTable] Internationalisation affichage


Sujet :

jQuery

  1. #1
    Membre éclairé
    Homme Profil pro
    Ingénieur en électrotechnique retraité
    Inscrit en
    Décembre 2008
    Messages
    1 579
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 72
    Localisation : France, Bas Rhin (Alsace)

    Informations professionnelles :
    Activité : Ingénieur en électrotechnique retraité

    Informations forums :
    Inscription : Décembre 2008
    Messages : 1 579
    Points : 804
    Points
    804
    Par défaut [DataTable] Internationalisation affichage
    Bonjour,
    J'essaye de mettre les textes de DataTable dans la langue de l'utilisateur. Je prends ici l'exemple du Français.
    Dans la documentation DataTable, dans le paragraphe 'Configuration', je ne vois pas à quoi correspond '#example'. J'ai supposé qu'il s'agissait de l'id de la table (chez moi #table) mais cela ne fonctionne pas. L'affichage de la table est correct mais les textes restent en Anglais.
    J'ai un fichier de traduction 'view/lang/fr_dataTables.json' et le script suivant:
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    	<script>$(document).ready(function() {  	// executed when document is loaded
    		let table = new DataTable('#table');
    		var search = $("input[type='search']");
    		search.focus();
    	});
    // Ajout du 14/11 pour l'internationalisation
    	$('#table').DataTable( {
    		language: {
    			url: "view/lang/fr_dataTables.json"	// remplacer fr par la variable de langue
    		}
    	} );
    	</script>
    Où est-ce que cela ne va pas? Que dois-je modifier?

  2. #2
    Membre confirmé
    Homme Profil pro
    Autre
    Inscrit en
    Juillet 2021
    Messages
    321
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Loire Atlantique (Pays de la Loire)

    Informations professionnelles :
    Activité : Autre

    Informations forums :
    Inscription : Juillet 2021
    Messages : 321
    Points : 642
    Points
    642
    Par défaut
    Bonjour,

    Est-ce que tu as une erreur dans la console du navigateur ?

    Peut-être une erreur 404 pour charger le fichier json si l'url n'est pas correcte : dans ce cas essayer de renseigner l'URL absolue avec le ndd ou à partir du premier / :
    url: "https://monsite.com/view/lang/fr_dataTables.json" ou url: "/view/lang/fr_dataTables.json" si le dossier view est à la racine du site

  3. #3
    Membre éclairé
    Homme Profil pro
    Ingénieur en électrotechnique retraité
    Inscrit en
    Décembre 2008
    Messages
    1 579
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 72
    Localisation : France, Bas Rhin (Alsace)

    Informations professionnelles :
    Activité : Ingénieur en électrotechnique retraité

    Informations forums :
    Inscription : Décembre 2008
    Messages : 1 579
    Points : 804
    Points
    804
    Par défaut
    Bonjour,
    Citation Envoyé par Pytet Voir le message
    Est-ce que tu as une erreur dans la console du navigateur ?
    Peut-être une erreur 404 pour charger le fichier json si l'url n'est pas correcte : dans ce cas essayer de renseigner l'URL absolue avec le ndd ou à partir du premier / :
    Non, je n'ai aucune erreur d'aucune sorte. Mieux, le réseau indique un code 200 pour toutes les pages appelées.

    Citation Envoyé par Pytet Voir le message
    url: "https://monsite.com/view/lang/fr_dataTables.json" ou url: "/view/lang/fr_dataTables.json" si le dossier view est à la racine du site
    J'ai essayé les deux possibilités sans résultat.

    NOTE: Je travaille en local. Il me semble avoir déjà eu le problème une fois précédente. Je crois me souvenir que la langue n'était pas prise en compte en local mais fonctionnait en hébergement distant.

  4. #4
    Membre éclairé
    Homme Profil pro
    Urbaniste
    Inscrit en
    Août 2023
    Messages
    386
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : Autre

    Informations professionnelles :
    Activité : Urbaniste

    Informations forums :
    Inscription : Août 2023
    Messages : 386
    Points : 788
    Points
    788
    Par défaut
    Bonjour,

    c'est peut être juste le nom du fichier qui devrait être fr-FR.json

    Bonne journée

  5. #5
    Membre éclairé
    Homme Profil pro
    Ingénieur en électrotechnique retraité
    Inscrit en
    Décembre 2008
    Messages
    1 579
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 72
    Localisation : France, Bas Rhin (Alsace)

    Informations professionnelles :
    Activité : Ingénieur en électrotechnique retraité

    Informations forums :
    Inscription : Décembre 2008
    Messages : 1 579
    Points : 804
    Points
    804
    Par défaut
    Non, fr-FR est le nom par défaut donné comme exemple mais on donne bien le nom qu'on veut dans la mesure où il s'agit d'un fichier du site.

  6. #6
    Membre confirmé
    Homme Profil pro
    Autre
    Inscrit en
    Juillet 2021
    Messages
    321
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Loire Atlantique (Pays de la Loire)

    Informations professionnelles :
    Activité : Autre

    Informations forums :
    Inscription : Juillet 2021
    Messages : 321
    Points : 642
    Points
    642
    Par défaut
    Essaye de définir les options lors de l'initialisation de la table (new DataTable) :
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    let table = new DataTable('#table', {
        language: {
            url: '/view/lang/fr_dataTables.json',
        },
    });
    Si ca ne fonctionne toujours pas, vérifier que ton fichier json est bien valide.
    Si tu n'a pas de traduction personnalisée, le mieux serait peut être d'utiliser le fichier fourni par DataTable :
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    let table = new DataTable('#table', {
        language: {
            url: '//cdn.datatables.net/plug-ins/1.13.7/i18n/fr-FR.json',
        },
    });
    https://www.datatables.net/plug-ins/i18n/French.html

  7. #7
    Membre éclairé
    Homme Profil pro
    Ingénieur en électrotechnique retraité
    Inscrit en
    Décembre 2008
    Messages
    1 579
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 72
    Localisation : France, Bas Rhin (Alsace)

    Informations professionnelles :
    Activité : Ingénieur en électrotechnique retraité

    Informations forums :
    Inscription : Décembre 2008
    Messages : 1 579
    Points : 804
    Points
    804
    Par défaut
    J'ai effectivement apporté quelques modif de détails au document.
    Le script suivant provoque une erreur que je ne retrouve pas.
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    $(document).ready(function() {
    	let table = new DataTable('#table'{
    		language: {
    			url: "view/lang/fr_dataTables.json",
    		},
    	})
    });
    Uncaught SyntaxError: missing ) after argument list
    Pour moi, toutes les parenthèses sont fermées.
    Je voudrais d'abord lever l'erreur de syntaxe avant de voir si je dois tester le lien avec un / ou un lien absolu.

  8. #8
    Membre confirmé
    Homme Profil pro
    Autre
    Inscrit en
    Juillet 2021
    Messages
    321
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Loire Atlantique (Pays de la Loire)

    Informations professionnelles :
    Activité : Autre

    Informations forums :
    Inscription : Juillet 2021
    Messages : 321
    Points : 642
    Points
    642
    Par défaut
    Il manque une virgule après le premier paramètre '#table' dans le constructeur : let table = new DataTable('#table', { //...

  9. #9
    Membre éclairé
    Homme Profil pro
    Ingénieur en électrotechnique retraité
    Inscrit en
    Décembre 2008
    Messages
    1 579
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 72
    Localisation : France, Bas Rhin (Alsace)

    Informations professionnelles :
    Activité : Ingénieur en électrotechnique retraité

    Informations forums :
    Inscription : Décembre 2008
    Messages : 1 579
    Points : 804
    Points
    804
    Par défaut
    Merci, cette partie fonctionne et l'affichage est bien en Français. Mais j'ai intégré ce code dans $(document).ready() comme ceci et le focus qui fonctionnait auparavant ne se fait plus. La console ne renvoie aucune erreur.
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    	$(document).ready(function() {
    		let table = new DataTable('#table',{
    			language: {
    				url: "view/lang/fr_dataTables.json",
    			},
    		});
    		let search = $("input[type='search']");
    		search.focus();
    	});

  10. #10
    Membre confirmé
    Homme Profil pro
    Autre
    Inscrit en
    Juillet 2021
    Messages
    321
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Loire Atlantique (Pays de la Loire)

    Informations professionnelles :
    Activité : Autre

    Informations forums :
    Inscription : Juillet 2021
    Messages : 321
    Points : 642
    Points
    642
    Par défaut
    L'initialisation de DataTable doit encore être en cours lorsque tu appliques ton focus, essaye d'attendre la fin de l'initialisation avec initComplete :

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    $(document).ready(function() {
     
      let table = new DataTable('#table', {
        language: {
          url: "view/lang/fr_dataTables.json",
        },
     
        initComplete: function() {
          $('#table_filter [type="search"]').focus();
        }
      });
     
    });

  11. #11
    Membre éclairé
    Homme Profil pro
    Ingénieur en électrotechnique retraité
    Inscrit en
    Décembre 2008
    Messages
    1 579
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 72
    Localisation : France, Bas Rhin (Alsace)

    Informations professionnelles :
    Activité : Ingénieur en électrotechnique retraité

    Informations forums :
    Inscription : Décembre 2008
    Messages : 1 579
    Points : 804
    Points
    804
    Par défaut
    Merci beaucoup, tout fonctionne impeccablement.
    Il faut dire que je connais mal DataTable ni jQuery que je n'utilise que dans ce contexte limité.

+ Répondre à la discussion
Cette discussion est résolue.

Discussions similaires

  1. Problème affichage datatable
    Par caneman dans le forum JSF
    Réponses: 32
    Dernier message: 11/07/2011, 15h07
  2. Réponses: 16
    Dernier message: 26/08/2008, 13h45
  3. Réponses: 21
    Dernier message: 13/02/2008, 17h16
  4. probleme d'affichage "dataTable"
    Par ypoupou dans le forum JSF
    Réponses: 2
    Dernier message: 09/01/2008, 13h05
  5. probleme affichage Liste <dataTable
    Par skanderb dans le forum JSF
    Réponses: 1
    Dernier message: 25/04/2007, 11h10

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo