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 :

Mettre à jour dynamiquement un tableau html


Sujet :

jQuery

Vue hybride

Message précédent Message précédent   Message suivant Message suivant
  1. #1
    Membre éclairé Avatar de arthuro45
    Profil pro
    Développeur du dimanche
    Inscrit en
    Juillet 2009
    Messages
    602
    Détails du profil
    Informations personnelles :
    Localisation : France, Essonne (Île de France)

    Informations professionnelles :
    Activité : Développeur du dimanche

    Informations forums :
    Inscription : Juillet 2009
    Messages : 602
    Par défaut Mettre à jour dynamiquement un tableau html
    Bonjour,

    J'ai un tableau html alimenté par une BDD via PHP. Dans ce tableau je peux saisir des données que j'envoie par une requête Ajax.

    Ma question :
    Comment faire pour mettre à jour les données d'une colonne du tableau html après la requête d'insertion Ajax ?

    La fonction pour l'insertion :

    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
    function insertionCde(){
        $("#validerCde").click(function() {
                if(confirm("Veuillez confirmer la création de la commande")) {
                    var str = $(".input_cmd").serialize(); // Très pratique, je serialize toutes les données.                     
                    $.ajax({
                        type: "GET",
                        url: "test.php",
                        data: { refqte:str },
                        success: function(data){
                            if(data!="")
                            {
                                $("#cdeOk").html("Votre commande est enregistrée."); // On affiche le message
                                        $('.input_cmd').val(""); // On vide les input des quantités saisies.
                                        affMasqBtn(); // Fonction qui masque le bouton #validerCde.
                            }
                            else
                            {
                                $('#cdeOk').html("une erreur est survenue !");
                            }
                        }
                    });
                } 
                else {
                                return false;
                }
        });
    }
    Le tableau html avec les données, en rouge la colonne à mettre à jour :
    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
    echo "<table class='mag30_tableau' id='tableau_cmd'>\n";
        echo '<thead>';
        echo '<tr>';
        echo '<th class="th">Référence</th>';
        echo '<th class="th">Libellé</th>';
        echo '<th class="th">Remettant</th>';
        echo '<th class="th">Stock</th>';
        echo '<th class="th">Stock disponible</th>';
        echo $thCde;
        echo '</tr>';
        echo '</thead>';
                            
        while ($row = mssql_fetch_array($req2)) {
    
                echo '<tbody>';
                echo '<tr>';
                        echo '<td class="td">'.$row["ascart"].'</td>';
                        echo '<td class="td">'.$row['asdese'].'</td>';
                        echo '<td class="td">'.$row['aectie'].'</td>';
                        echo '<td class="td">'.$row['qte'].'</td>';
                        echo '<td class="td">'.$stockApresLivraison.'</td>';
                        echo $tdCde;
                echo "</tr>\n";
                echo '</tbody>';
        }
        echo "</table>\n";
    Pour résumé :
    1 - Une page affiche un tableau html qui liste tous les articles d'une table.
    2 - On saisit une quantité en bout de ligne dans $tdCde, qui n'est autre qu'un champ input.
    3 - Après validation de la commande j'insert les données en BDD.
    4 - Je viens mettre à jour les données du tableau.

    Merci pour votre aide

  2. #2
    Membre éclairé Avatar de arthuro45
    Profil pro
    Développeur du dimanche
    Inscrit en
    Juillet 2009
    Messages
    602
    Détails du profil
    Informations personnelles :
    Localisation : France, Essonne (Île de France)

    Informations professionnelles :
    Activité : Développeur du dimanche

    Informations forums :
    Inscription : Juillet 2009
    Messages : 602
    Par défaut
    J'ai avancé un peu
    Dans la doc j'ai trouvé la fonction load

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    function chargerData(){
        $("body").load("mag30.php");
    }
    J'ai testé avec la balise body, ça recharge bien la page mais il faudrait que je cible juste une colonne du tableau. Entourer d'une div le td de la colonne en question suffirait ?

    J'ai ajouté la fonction chargerData() à $.ajax :

    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
    function insertionCde(){
        $("#validerCde").click(function() {
                if(confirm("Veuillez confirmer la création de la commande")) {
                    var str = $(".input_cmd").serialize(); // Très pratique, je serialize toutes les données.                     
                    $.ajax({
                        type: "GET",
                        url: "nouvelle_commande2.php",
                        data: { refqte:str },
                        success: function(data){
                            if(data!="")
                            {
                                chargerData(); // Rechargement des données dans le tableau.
                                $('#cdeOk').html(data); // On affiche le message.
                                $('.input_cmd').val(""); // On vide les input des quantités saisies.
                                affMasqBtn(); // Fonction qui masque le bouton #validerCde.
                            }
                            else
                            {
                                $('#cdeOk').html("une erreur est survenue !");
                            }
                        }
                    });
                } 
                else {
                                return false;
                }
        });
    }

  3. #3
    Membre expérimenté

    Homme Profil pro
    Étudiant
    Inscrit en
    Juin 2008
    Messages
    136
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 36
    Localisation : France

    Informations professionnelles :
    Activité : Étudiant
    Secteur : High Tech - Éditeur de logiciels

    Informations forums :
    Inscription : Juin 2008
    Messages : 136
    Par défaut
    Un petit conseil, étant donné que tu charges ton tableau en ajax je te conseillerai de jeter un coup d'oeil sur un plug-in jQuery nommé jqGrid (démo)

  4. #4
    Rédacteur

    Avatar de danielhagnoul
    Homme Profil pro
    Étudiant perpétuel
    Inscrit en
    Février 2009
    Messages
    6 389
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 75
    Localisation : Belgique

    Informations professionnelles :
    Activité : Étudiant perpétuel
    Secteur : Enseignement

    Informations forums :
    Inscription : Février 2009
    Messages : 6 389
    Billets dans le blog
    125
    Par défaut
    Bonjour

    Il est possible de chargez un fragment de page web, ici l'élément ayant l'id elemID (l'espace blanc avant #elemID est indispensable) :

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    $("#conteneur").load("url #elemID");

    Blog

    Sans l'analyse et la conception, la programmation est l'art d'ajouter des bogues à un fichier texte vide.
    (Louis Srygley : Without requirements or design, programming is the art of adding bugs to an empty text file.)

  5. #5
    Membre éclairé Avatar de arthuro45
    Profil pro
    Développeur du dimanche
    Inscrit en
    Juillet 2009
    Messages
    602
    Détails du profil
    Informations personnelles :
    Localisation : France, Essonne (Île de France)

    Informations professionnelles :
    Activité : Développeur du dimanche

    Informations forums :
    Inscription : Juillet 2009
    Messages : 602
    Par défaut
    Bonjour

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    $("#conteneur").load("url #elemID");
    On charge #elemID dans #conteneur ?

  6. #6
    Rédacteur

    Avatar de danielhagnoul
    Homme Profil pro
    Étudiant perpétuel
    Inscrit en
    Février 2009
    Messages
    6 389
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 75
    Localisation : Belgique

    Informations professionnelles :
    Activité : Étudiant perpétuel
    Secteur : Enseignement

    Informations forums :
    Inscription : Février 2009
    Messages : 6 389
    Billets dans le blog
    125
    Par défaut
    On remplace le contenu de #conteneur par celui de #elemID

    Voir : http://api.jquery.com/load

    Blog

    Sans l'analyse et la conception, la programmation est l'art d'ajouter des bogues à un fichier texte vide.
    (Louis Srygley : Without requirements or design, programming is the art of adding bugs to an empty text file.)

Discussions similaires

  1. Récupérer des données et mettre à jour automatiquement un tableau
    Par sooapy dans le forum Macros et VBA Excel
    Réponses: 0
    Dernier message: 12/01/2014, 22h00
  2. Tri dynamique de tableau HTML avec javascript
    Par Say hello dans le forum Général JavaScript
    Réponses: 3
    Dernier message: 20/11/2013, 10h30
  3. Réponses: 0
    Dernier message: 07/11/2013, 23h16
  4. [Tableaux] Générer dynamiquement un tableau HTML
    Par bdaboah dans le forum Langage
    Réponses: 6
    Dernier message: 06/02/2008, 15h34
  5. Mettre à jour dynamiquement une fenêtre swing
    Par madina dans le forum Agents de placement/Fenêtres
    Réponses: 1
    Dernier message: 23/11/2005, 19h08

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