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

  1. #1
    Membre averti
    Homme Profil pro
    Ingénieur en électrotechnique retraité
    Inscrit en
    décembre 2008
    Messages
    702
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 67
    Localisation : France, Ain (Rhône Alpes)

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

    Informations forums :
    Inscription : décembre 2008
    Messages : 702
    Points : 369
    Points
    369

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

    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&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.

  2. #2
    Membre expérimenté Avatar de Toufik83
    Homme Profil pro
    Développeur informatique
    Inscrit en
    janvier 2012
    Messages
    844
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 35
    Localisation : Maroc

    Informations professionnelles :
    Activité : Développeur informatique
    Secteur : High Tech - Éditeur de logiciels

    Informations forums :
    Inscription : janvier 2012
    Messages : 844
    Points : 1 353
    Points
    1 353

    Par défaut

    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.

  3. #3
    Membre averti
    Homme Profil pro
    Ingénieur en électrotechnique retraité
    Inscrit en
    décembre 2008
    Messages
    702
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 67
    Localisation : France, Ain (Rhône Alpes)

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

    Informations forums :
    Inscription : décembre 2008
    Messages : 702
    Points : 369
    Points
    369

    Par défaut

    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) (1)
    • 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.

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

  4. #4
    Membre averti
    Homme Profil pro
    Ingénieur en électrotechnique retraité
    Inscrit en
    décembre 2008
    Messages
    702
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 67
    Localisation : France, Ain (Rhône Alpes)

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

    Informations forums :
    Inscription : décembre 2008
    Messages : 702
    Points : 369
    Points
    369

    Par défaut

    Citation Envoyé par Toufik83 Voir le message
    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&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 : 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&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"
        }
    }
    */

  5. #5
    Rédacteur/Modérateur

    Avatar de SpaceFrog
    Homme Profil pro
    Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Bidouilleur SharePoint
    Inscrit en
    mars 2002
    Messages
    38 272
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 69
    Localisation : Royaume-Uni

    Informations professionnelles :
    Activité : Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Bidouilleur SharePoint
    Secteur : Industrie

    Informations forums :
    Inscription : mars 2002
    Messages : 38 272
    Points : 65 550
    Points
    65 550
    Billets dans le blog
    1

    Par défaut

    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 ...
    Ma page Developpez - Mon Blog Developpez
    Président du CCMPTP (Comité Contre le Mot "Problème" dans les Titres de Posts)
    Deux règles du succès: 1) Ne communiquez jamais à quelqu'un tout votre savoir...
    Votre post est résolu ? Alors n'oubliez pas le Tag


    réalisations :www.oxygen-translations.fr|www.saftair.fr| www.ouestisol.fr | www.sistac-alizay.fr | www.acoustishop.fr | www.litt.fr | www.ouestventil.fr
    Humour

  6. #6
    Membre averti
    Homme Profil pro
    Ingénieur en électrotechnique retraité
    Inscrit en
    décembre 2008
    Messages
    702
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 67
    Localisation : France, Ain (Rhône Alpes)

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

    Informations forums :
    Inscription : décembre 2008
    Messages : 702
    Points : 369
    Points
    369

    Par défaut

    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.

  7. #7
    Rédacteur/Modérateur
    Avatar de jreaux62
    Homme Profil pro
    Webdesigner
    Inscrit en
    août 2008
    Messages
    14 512
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 52
    Localisation : France, Pas de Calais (Nord Pas de Calais)

    Informations professionnelles :
    Activité : Webdesigner
    Secteur : Arts - Culture

    Informations forums :
    Inscription : août 2008
    Messages : 14 512
    Points : 29 379
    Points
    29 379

    Par défaut

    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 );
    "Si tu suis le chemin qui s'appelle « plus tard », tu arriveras à la place qui s'appelle « jamais »."
    François Camille Prévot (1910-1996), instituteur puis Directeur d'école et... mon grand-père.
    "Pose ta question, tu seras idiot une seconde. Ne la pose pas, tu seras idiot toute ta vie."
    Albert Einstein (1879-1955).
    Mes tutos DVP
    Gestion-Affichage de Nouvelles
    Affichage en tableau HTML
    Fonctions de redimensionnement d'images

  8. #8
    Membre expérimenté Avatar de Toufik83
    Homme Profil pro
    Développeur informatique
    Inscrit en
    janvier 2012
    Messages
    844
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 35
    Localisation : Maroc

    Informations professionnelles :
    Activité : Développeur informatique
    Secteur : High Tech - Éditeur de logiciels

    Informations forums :
    Inscription : janvier 2012
    Messages : 844
    Points : 1 353
    Points
    1 353

    Par défaut

    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.

  9. #9
    Membre averti
    Homme Profil pro
    Ingénieur en électrotechnique retraité
    Inscrit en
    décembre 2008
    Messages
    702
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 67
    Localisation : France, Ain (Rhône Alpes)

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

    Informations forums :
    Inscription : décembre 2008
    Messages : 702
    Points : 369
    Points
    369

    Par défaut

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

  10. #10
    Membre expérimenté Avatar de Toufik83
    Homme Profil pro
    Développeur informatique
    Inscrit en
    janvier 2012
    Messages
    844
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 35
    Localisation : Maroc

    Informations professionnelles :
    Activité : Développeur informatique
    Secteur : High Tech - Éditeur de logiciels

    Informations forums :
    Inscription : janvier 2012
    Messages : 844
    Points : 1 353
    Points
    1 353

    Par défaut

    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({/*....*/});
    });

  11. #11
    Membre averti
    Homme Profil pro
    Ingénieur en électrotechnique retraité
    Inscrit en
    décembre 2008
    Messages
    702
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 67
    Localisation : France, Ain (Rhône Alpes)

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

    Informations forums :
    Inscription : décembre 2008
    Messages : 702
    Points : 369
    Points
    369

    Par défaut

    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.

  12. #12
    Membre expérimenté Avatar de Toufik83
    Homme Profil pro
    Développeur informatique
    Inscrit en
    janvier 2012
    Messages
    844
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 35
    Localisation : Maroc

    Informations professionnelles :
    Activité : Développeur informatique
    Secteur : High Tech - Éditeur de logiciels

    Informations forums :
    Inscription : janvier 2012
    Messages : 844
    Points : 1 353
    Points
    1 353

    Par défaut

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

  13. #13
    Membre averti
    Homme Profil pro
    Ingénieur en électrotechnique retraité
    Inscrit en
    décembre 2008
    Messages
    702
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 67
    Localisation : France, Ain (Rhône Alpes)

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

    Informations forums :
    Inscription : décembre 2008
    Messages : 702
    Points : 369
    Points
    369

    Par défaut

    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.

  14. #14
    Membre expérimenté Avatar de Toufik83
    Homme Profil pro
    Développeur informatique
    Inscrit en
    janvier 2012
    Messages
    844
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 35
    Localisation : Maroc

    Informations professionnelles :
    Activité : Développeur informatique
    Secteur : High Tech - Éditeur de logiciels

    Informations forums :
    Inscription : janvier 2012
    Messages : 844
    Points : 1 353
    Points
    1 353

    Par défaut

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

  15. #15
    Membre averti
    Homme Profil pro
    Ingénieur en électrotechnique retraité
    Inscrit en
    décembre 2008
    Messages
    702
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 67
    Localisation : France, Ain (Rhône Alpes)

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

    Informations forums :
    Inscription : décembre 2008
    Messages : 702
    Points : 369
    Points
    369

    Par défaut

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

  16. #16
    Membre expérimenté Avatar de Toufik83
    Homme Profil pro
    Développeur informatique
    Inscrit en
    janvier 2012
    Messages
    844
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 35
    Localisation : Maroc

    Informations professionnelles :
    Activité : Développeur informatique
    Secteur : High Tech - Éditeur de logiciels

    Informations forums :
    Inscription : janvier 2012
    Messages : 844
    Points : 1 353
    Points
    1 353

    Par défaut

    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.

  17. #17
    Membre averti
    Homme Profil pro
    Ingénieur en électrotechnique retraité
    Inscrit en
    décembre 2008
    Messages
    702
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 67
    Localisation : France, Ain (Rhône Alpes)

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

    Informations forums :
    Inscription : décembre 2008
    Messages : 702
    Points : 369
    Points
    369

    Par défaut

    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.

  18. #18
    Membre expérimenté Avatar de Toufik83
    Homme Profil pro
    Développeur informatique
    Inscrit en
    janvier 2012
    Messages
    844
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 35
    Localisation : Maroc

    Informations professionnelles :
    Activité : Développeur informatique
    Secteur : High Tech - Éditeur de logiciels

    Informations forums :
    Inscription : janvier 2012
    Messages : 844
    Points : 1 353
    Points
    1 353

    Par défaut

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

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

Discussions similaires

  1. Transférer des fichiers avec php
    Par diable2010 dans le forum Fichiers
    Réponses: 1
    Dernier message: 18/09/2008, 09h20
  2. comment lire des fichiers excel avec php?
    Par dear_rihab dans le forum Bureautique
    Réponses: 5
    Dernier message: 02/11/2007, 12h38
  3. Transférer des fichiers avec un câble réseau
    Par denis finch dans le forum Développement
    Réponses: 5
    Dernier message: 08/11/2005, 16h08
  4. Réponses: 2
    Dernier message: 23/09/2005, 16h22

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