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

JavaScript Discussion :

Datatables et fonctions


Sujet :

JavaScript

Vue hybride

Message précédent Message précédent   Message suivant Message suivant
  1. #1
    Membre confirmé
    Homme Profil pro
    Enseignant
    Inscrit en
    Novembre 2018
    Messages
    184
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 42
    Localisation : France, Essonne (Île de France)

    Informations professionnelles :
    Activité : Enseignant

    Informations forums :
    Inscription : Novembre 2018
    Messages : 184
    Par défaut Datatables et fonctions
    Bonjour,

    Je suis confronté au pb suivant :
    - j'ai une classe avec des fonctions, à l'intérieur desquelles sont générées des tableaux Datatables.

    Le problème est que je ne comprends pas pourquoi quand on déclare une fonction dans le onClick, le retour est systématiquement undefined, le "this" est undefined et que quand je réinitialise this (genre thisObj = this) et que j'appelle une fonction avec, le retour est invariablement "la fonction fonction() n'est pas définie".

    Comment contourner ce pb ?

    merci

    Sylvain

    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
    thisObj = this;
     
                            "columns": [
                                {data: 'reference', render: function(data, type, row) {
                                    return `<a href="#" id="${row.sha1}" onclick="thisObj.readCarte('${row.sha1}')">${row.reference}</a>`; // ici 
                                    }
                                },
                                {data: 'intitule', render: function(data, type, row) {
                                    return `${row.intitule}`;
                                    }
                                },
                                {data: 'date', render: function(data, type, row) {
                                    return `${row.annee ? row.annee : 'nc'}`;
                                    }
                                }
                        ]

  2. #2
    Expert confirmé Avatar de Toufik83
    Homme Profil pro
    Développeur informatique
    Inscrit en
    Janvier 2012
    Messages
    2 499
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 42
    Localisation : Suisse

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

    Informations forums :
    Inscription : Janvier 2012
    Messages : 2 499
    Par défaut
    Bonjour,

    Le mot clé this vaut toujours à la fonction parente dans laquelle il a été appelé, dans votre cas la fonction parente est function(data, type, row).

    Si vous remplacez la fonction parente par une fonction fléchée, votre problème sera résolu :

    Au lieu de
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    render: function(data, type, row){
       return `<a href="#" id="${row.sha1}" onclick="thisObj.readCarte('${row.sha1}')">${row.reference}</a>`; // ici
    }
    Mettez :
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    render: (data, type, row)=>{
        return `<a href="#" id="${row.sha1}" onclick="this.readCarte('${row.sha1}')">${row.reference}</a>`; // vous voyez ici le this et pas thisObj !
    }

  3. #3
    Membre confirmé
    Homme Profil pro
    Enseignant
    Inscrit en
    Novembre 2018
    Messages
    184
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 42
    Localisation : France, Essonne (Île de France)

    Informations professionnelles :
    Activité : Enseignant

    Informations forums :
    Inscription : Novembre 2018
    Messages : 184
    Par défaut
    J'ai essayé mais ça ne fonctionne pas.

    Chose que je n'ai pas mentionné dans le post précédent, c'est que cette table générée par Datatables est alimentée par un appel AJAX. Le 'this" pointerait-il sur l'AJAX ?

    Voila mon code modifié.

    Là où est appelé ma fonction :
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
                      columns: [
                          {data: 'dnuper', render: (data, type, row)=>{
                              return `<a href="#" id="${row.numero}" onclick="this.infoProprietaire('${row.numero}', '${row.compte}')">${row.numero}</a>`;
                              }
                          },

    La dite fonction
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
        infoProprietaire(numero, compte){
          new Proprietaire({
            numero:numero,
            compte:compte
          }).addFiche()
        }
    dans addFiche se trouve des appels ajax qui permettent de faire une fiche propriétaire.

    Et là, le click renvoie systématiquement "this.infoProprietaire is not a function", et je trouve pas pourquoi....

    Merci

    Sylvain

  4. #4
    Expert confirmé Avatar de Toufik83
    Homme Profil pro
    Développeur informatique
    Inscrit en
    Janvier 2012
    Messages
    2 499
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 42
    Localisation : Suisse

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

    Informations forums :
    Inscription : Janvier 2012
    Messages : 2 499
    Par défaut
    Si comme tu dis la génération des DataTables se trouve dans la fonction success d'ajax, et que le mot clé function est utilisé, ceci dit que this représente cette fonction.

    Il faudrait voir la totalité du code pour vous répondre correctement...

  5. #5
    Modérateur

    Avatar de NoSmoking
    Homme Profil pro
    Inscrit en
    Janvier 2011
    Messages
    17 198
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Isère (Rhône Alpes)

    Informations forums :
    Inscription : Janvier 2011
    Messages : 17 198
    Par défaut
    Bonjour
    Citation Envoyé par Toufik83
    render: (data, type, row)=>{ // ...
    cette notation est acceptable pour des objets/namespaces mais pas pour des class
    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
    const NS = {
      render: () => {
        console.log("yes!!")
      },
    }
     
    Class MaClass {
      constructor() {}
     
      laMethode: function() {
        // le code
      }
     
      laMethode() {
        // le code
      }
    }

    Citation Envoyé par sylvain257
    `<a href="#" id="${row.numero}" onclick="this.infoProprietaire('${row.numero}', '${row.compte}')">${row.numero}</a>`
    lorsqu'un gestionnaire d'événement est in-line, le this correspond à l'élément du DOM sur lequel est attaché l'écouteur.

    Une solution consisterait à passer par des méthodes static mais je dois admettre que j'ai du mal à voir ce que tu essaies de faire !

  6. #6
    Membre confirmé
    Homme Profil pro
    Enseignant
    Inscrit en
    Novembre 2018
    Messages
    184
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 42
    Localisation : France, Essonne (Île de France)

    Informations professionnelles :
    Activité : Enseignant

    Informations forums :
    Inscription : Novembre 2018
    Messages : 184
    Par défaut
    En fait, j'ai une carte sur lequel j'ai des parcelles. Quand je clique sur une parcelle, une sidebar s'ouvre avec les données de la parcelle. On retrouve tout un tas de données dont les propriétaires de la parcelle. Ces propriétaires remontent dans une table générée par datatables.

    Un propriétaire est identifié via un identifiant unique. Je suis obligé de flouter, car ce ne sont pas des données opensource.

    Nom : proprietaire.png
Affichages : 90
Taille : 3,4 Ko

    Dans ce tableau "MBA584" est cliquable qui permet d'ouvrir la fiche propriétaire, d'où mon onclick "inline" qui permet d'accéder à la fiche.

    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
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
      class CadastreData {
        constructor({
            parcelle = ""
        }){
            this.parcelle = parcelle
        }
     
     
     
     
        infoProprietaire(numero, compte){
          new Proprietaire({
            numero:numero,
            compte:compte
          }).addFiche() // qui permet d'afficher la fiche propriétaire (là dedans on ne retrouve pas que le numero, le nom et l'adresse, on retrouve aussi la liste des parcelles associées à ce propriétaire.
        }
    proprietaire(){
    $.ajax({
                url: 'fichier.php?',
                type:'GET',
                datatype:'json',
                data:{
                  "parcelle":this.parcelle
                },
                success: (data) => {
     
                  $('#liste_proprietaires').html(`
                      <table class="table_dt" id="proprios">
                        <thead>
                            <tr>
                                <th>Id</th>
                                <th>Nom</th>
                                <th>Adresse</th>
                            </tr>
                        </thead>
                      </table>`);
     
                    var table = $('#proprios').DataTable({
                    paging: true,
                    autoWidth:false,
                    scrollCollapse: false,
                    fixedHeader: true,
                    pageLength : 10,
                    destroy: true,
                    ordering:false,
                    responsive:true,
                      language:{
                          "info":           "_START_ de _END_ sur _TOTAL_",
                          "infoEmpty":      "0 résultat",
                          "zeroRecords":  "Pas de résultat"
                      },
                      dom:'Bt',
                      data:response,
                      columns: [
                          {data: 'dnuper', render: (data, type, row)=>{
                              return `<a href="#" id="${row.numero}" onclick="this.infoProprietaire('${row.compte}', '${row.numero}')">${row.numero}</a>`; // mon click inline qui permet d'accéder à la fiche propritéaire
                              }
                          },
                          {data: 'ddenom', render: (data, type, row)=> {
                              return `${row.nom_prop}`;
                              }
                          },
                          {data: 'adresse', render: (data, type, row)=> {
                              return `${row.adresse ? row.adresse : 'nc'}`;
                              }
                          }
                    ]
                  });
              }
              }
            })
    }
    Voila :-)

    Merci

    Sylvain

  7. #7
    Expert confirmé Avatar de Toufik83
    Homme Profil pro
    Développeur informatique
    Inscrit en
    Janvier 2012
    Messages
    2 499
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 42
    Localisation : Suisse

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

    Informations forums :
    Inscription : Janvier 2012
    Messages : 2 499
    Par défaut
    Citation Envoyé par NoSmoking Voir le message
    cette notation est acceptable pour des objets/namespaces mais pas pour des class
    Oui, je sais mais pour ce cas le render est une option de DataTable, ce n'est pas une méthode de classe.

    Sinon, je pense que la solution la plus simple est de stocker les valeurs de compte et numero dans des attributs data-compte et data-numero et utiliser le callback initComplete pour attacher l'écouteur de "click", puis supprimer le onclick des éléments HTML <a></a>:
    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
    columns: [{
         data: 'dnuper',
         render: (data, type, row) => {
               return `<a href="#" id="${row.numero}" data-compte="${row.compte}" data-numero="${row.numero}" >${row.numero}</a>`;
         },
         {....},
         {....}
    ],
    initComplete: (settings, json) => {
    	let obj=this;
            console.log('settings :', settings, ', this :', this)
            $(settings.nTable).on('click', 'td:nth-child(1) a', function(ev) {
                    let numero = $(this).attr('data-numero'), compte = $(this).attr('data-compte');
                    console.log('infoProp :', obj.infoProprietaire(compte, numero));
             });
    }

  8. #8
    Membre très actif
    Homme Profil pro
    bricoleur par les mots
    Inscrit en
    Avril 2015
    Messages
    738
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 80
    Localisation : France, Seine Maritime (Haute Normandie)

    Informations professionnelles :
    Activité : bricoleur par les mots
    Secteur : Distribution

    Informations forums :
    Inscription : Avril 2015
    Messages : 738
    Par défaut
    jour

    si tu veut que sa fonctionne il faut declarer l'evenement dynamiquement

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    onclick="thisObj.readCarte('${row.sha1}')"
    dans ce code thisObj est une chaîne de caractère qui ne peut contenir la référence de this se trouvant dans la variable thisObj precedement créé c'est pour ça que thisObj ne retourne rien

Discussions similaires

  1. [Plugin] [DataTables] Suppression fonction de tri sur colonne
    Par totot dans le forum jQuery
    Réponses: 1
    Dernier message: 05/02/2014, 18h35
  2. [Datatable] Champ en lecture seul avec SQL fonction
    Par zoltix dans le forum Développement
    Réponses: 1
    Dernier message: 18/03/2009, 17h03
  3. [VB.NET] fonction ISNULL sur dataTable
    Par Pfeffer dans le forum Accès aux données
    Réponses: 5
    Dernier message: 23/04/2008, 16h04
  4. une fonction pour le bgcolor dans une datatable
    Par ghnawfal dans le forum JSF
    Réponses: 2
    Dernier message: 09/04/2008, 13h33
  5. Réponses: 3
    Dernier message: 21/06/2006, 16h39

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