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 :

[AJAX] Comment Afficher via responseText les données(tables) provenant de MYSQL en AJAX


Sujet :

JavaScript

  1. #1
    Membre à l'essai
    Inscrit en
    Avril 2008
    Messages
    25
    Détails du profil
    Informations forums :
    Inscription : Avril 2008
    Messages : 25
    Points : 19
    Points
    19
    Par défaut [AJAX] Comment Afficher via responseText les données(tables) provenant de MYSQL en AJAX
    Bonsoir,
    Je travaille sur un site Internet et que j'ai besoin de faire des select via un script PHP et utiliser AJAX pour recupere ces donnees provenant du script et les afficher ensuite sur la page sans que la page se raffraichisse.
    J'arrive à faire ça, mes mon problème c'est que les tables sont desordonnees, pas de style(pas jolie), le triage(sortable en Anglais) ne fonctionne pas et les caratères accentuées s'affichent illisiblement.

    Quand j'utilise PHP seulement pour afficher les donnees, le resultat est de qualité, quand j'utilise AJAX la qualité n'y est pas, quelle est la difference?

    Pouvez-vous m'aider? ou si vous avez quelques exemples s'il vous plait faites-moi voir.

  2. #2
    Rédacteur

    Avatar de Bovino
    Homme Profil pro
    Développeur Web
    Inscrit en
    Juin 2008
    Messages
    23 647
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 53
    Localisation : France, Gironde (Aquitaine)

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

    Informations forums :
    Inscription : Juin 2008
    Messages : 23 647
    Points : 91 220
    Points
    91 220
    Billets dans le blog
    20
    Par défaut
    Sincèrement, il est difficile de te répondre...
    Tu ne peut pas récupérer de données mySQL en Ajax (même si dans l'absolu il doit être possible de lire un fichier sql comme du texte). Donc, comme dans ton traitement php, ta fonction ajax doit appeler un script php qui récupère les données sql, les traite et les renvoie en format texte.

    Mais répondre à ta question sans avoir un premier signe de code, peu de chances que tu obtienne une réponse convenable...
    Pas de question technique par MP !
    Tout le monde peut participer à developpez.com, vous avez une idée, contactez-moi !
    Mes formations video2brain : La formation complète sur JavaScriptJavaScript et le DOM par la pratiquePHP 5 et MySQL : les fondamentaux
    Mon livre sur jQuery
    Module Firefox / Chrome d'intégration de JSFiddle et CodePen sur le forum

  3. #3
    Membre à l'essai
    Inscrit en
    Avril 2008
    Messages
    25
    Détails du profil
    Informations forums :
    Inscription : Avril 2008
    Messages : 25
    Points : 19
    Points
    19
    Par défaut RE:
    Citation Envoyé par Bovino Voir le message
    Sincèrement, il est difficile de te répondre...
    Tu ne peut pas récupérer de données mySQL en Ajax (même si dans l'absolu il doit être possible de lire un fichier sql comme du texte). Donc, comme dans ton traitement php, ta fonction ajax doit appeler un script php qui récupère les données sql, les traite et les renvoie en format texte.

    Mais répondre à ta question sans avoir un premier signe de code, peu de chances que tu obtienne une réponse convenable...
    Mon problème est resolu à 80%:
    L'affichage est fait.
    Une seule chose qui me reste est le triage des cellules de la table qui s'affiche(en Anglais Sortable). C'est-à-dire quand on clique sur une cellule dans l'en-tete du tableau ça inverse l'ordre d'affichage.

    Quelqu'un pourrait-il m'aider?

    Voici mon script Ajax:script.js

    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
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    87
    88
    89
    90
    91
    92
    93
    94
    95
    96
    97
    98
    99
    100
    101
    102
    103
    104
    105
    106
    107
    108
    109
    110
    111
    112
    113
    114
    115
    116
    117
    118
    119
    120
    121
    122
    123
    124
    125
    126
    127
    128
    129
    130
    131
    132
    function getHTTPObject() {
      var xmlhttp;
     
      if(window.XMLHttpRequest){
        xmlhttp = new XMLHttpRequest();
      }
      else if (window.ActiveXObject){
        xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
        if (!xmlhttp){
            xmlhttp=new ActiveXObject("Msxml2.XMLHTTP");
        }
     
    }
      return xmlhttp;
     
     
    }
    var http = getHTTPObject(); // We create the HTTP Object
     
    /*
    	Funtion Name=requestInfo 
    	Param = url >> Url to call : id = Passing div id for multiple use ~ as a seprator for eg. div1~div2 :
    	redirectPage >> if you like to redirect to other page once the event success then 
    	the response text = 1 and the redirectPage not left empty
    */
     
        function requestInfo(url,id) {
    //alert("Fonction trouvable request:"+url);    
    		var temp=new Array();
    			http.open("GET", url, true);
    			http.onreadystatechange = function() {
    				if (http.readyState == 4) {
    				  if(http.status==200) {
    			  		var results=http.responseText;
     
    					document.getElementById("showTable").innerHTML=results;
    				  } 
      				}
    			};
    			http.send(null);
           }
     
    /*
    	Function Name= emptyValidation
    	Desc = This function is used to validation for the empty field 
    	Param fieldList = This arguments set as a string varialble. you just need to supply the textbox name
    	if the textbox is multiple then supply with ~ separator for eg. username~password
    */
     
    function checkValidation(fieldList){
     
    		var field=new Array();
    		field=fieldList.split("~");
    		var counter=0;
    		for(i=0;i<field.length;i++) {
    			if(document.getElementById(field[i]).value=="") {
    				document.getElementById(field[i]).style.backgroundColor="#FF0000";
    				counter++;
    			} else {
    				document.getElementById(field[i]).style.backgroundColor="#FFFFFF";	
    			}
    		}
    		if(counter>0) {
    				alert("The Field mark as red could not left empty");
    				return false;
     
    		}  else {
    			return true;
    		}
     
    }
     
    function loginProcess() {
           var var_entre_date=document.getElementById("entre_date").value;
            var var_fin_date=document.getElementById("fin_date").value;
    	var var_choix_lieux=document.getElementById("choix_lieux").value;
            var var_choix_tpe=document.getElementById("choix_tpe").value;
    	var var_cheque=document.getElementById("cheque").value;
            var var_facture_client=document.getElementById("facture_client").value;
    	var var_type_transaction=document.getElementById("type_transaction").value;
            var var_No_vendeur=document.getElementById("No_vendeur").value;
    	var var_errors="";
     
    	if(var_entre_date==""){
    	var_errors+="Vous avez oublié d'entrer la date de début<br />";
    	}
     
    	if(var_fin_date==""){
    	var_errors+="Vous avez oublié d'entrer la date de fin<br /> ";
    	}
     
    	if(var_choix_lieux==""){
    	var_errors+="Vous avez oublié de remplir le champ de choix lieux\n  ";
    	}
     
    	if(var_choix_tpe==""){
    	//var_errors+="Vous avez oublié de remplir le champ de choix TPE\n  ";
    	}
     
    	if(var_cheque==""){
    	//var_errors+="Vous avez oublié de remplir le champ chèque\n  ";
    	}
     
    	if(var_facture_client==""){
    	//var_errors+="Vous avez oublié de remplir le champ No. facture/No. client\n  ";
    	}
     
    	if(var_type_transaction==""){
    	//var_errors+="Vous avez oublié d'entrer le type de transaction\n  ";
    	}
     
    	if(var_No_vendeur==""){
    	//var_errors+="Vous avez oublié d'entrer le No. de vendeur\n  ";
    	}
     
    	if(var_errors==""){
    	//document.getElementById("default").style.display='none';
     
    	// Formattage de la date debut: yy-mm-jj(08-05-23) 
    	var var_entre_date_format=var_entre_date.substring(6,8)+'-'+var_entre_date.substring(3,5)+'-'+var_entre_date.substring(0,2);
     
    	 // transmission date fin au format:yy-mm-jj(08-05-23) 
    	var var_fin_date_format=var_fin_date.substring(6,8)+'-'+var_fin_date.substring(3,5)+'-'+var_fin_date.substring(0,2);
    	document.getElementById("errors").innerHTML="";
    	requestInfo("includes/showTable.php?entre_date="+var_entre_date_format+"&fin_date="+var_fin_date_format+"&choix_lieux="+var_choix_lieux+"&choix_tpe="+var_choix_tpe+"&cheque="+var_cheque+"&facture_client="+var_facture_client+"&type_transaction="+var_type_transaction+"&No_vendeur="+var_No_vendeur,true,'showTable');
    	}else{
    	//document.getElementById("default").style.display='block';
    	document.getElementById("showTable").innerHTML="";
    	document.getElementById("errors").innerHTML=var_errors;
    	}
     
    }
    Voici mon script php:showTable.php
    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
    <?php
     
    include'connexion.php';
     
    echo"<table width='100%' border='0' style='border:1px solid #F0F0F0 ' cellpadding='0' cellspacing='0'><tr><td>
                <table width='100%' border='0' cellpadding='0' cellspacing='0' bgcolor='#ff0000'>
                                  <tr valign='top'> 
                                    <td width='12' align='left'><div align='left'><img src='images/sub_nav_tit_white_left.gif' width='12' height='21' /></div></td>
                                    <td width='100%' valign='middle' ><div align='left'> 
                                        <table width='98%' border='0' cellspacing='1' cellpadding='2'>
                                          <tr bordercolor='#FFFFFF'> 
                                            <td><strong><font color='#FFFFFF' size='3'>Journal des transactions</font></strong></td>
                                            <td align='right'> <font color='#FFFFFF' size='3'><strong>Affichage</strong></font> 
                                            </td>
                                          </tr>
                                        </table>
                                      </div></td>
                                    <td width='12' align='right'><div align='right'><img src='images/sub_nav_tit_white_right.gif' width='12' height='21' /></div></td>
                                  </tr>
                                </table>
            <table align='center' width='100%' cellspacing='1' cellpadding='2' border='0' class='sortable resizable'>
            <thead>
              <tr bgcolor='#E8E8E8'>
                <th class='sortfirstasc' height='25' style='padding-top:1px;padding-right:1px;padding-left:1px;color:blue;font-size:8.0pt;font-weight:700;font-style:italic;text-decoration:none;font-family:Arial, sans-serif;text-align:center;vertical-align:middle;border:0pt solid windowtext;background:#D8D8D8;white-space:normal;'onmouseover=this.style.backgroundColor='red' onmouseout=this.style.backgroundColor='#D8D8D8'><div><strong>No.</strong></div></th>
                <th class='sortfirstasc'><div><strong>Date</strong></div></th>
                <th class='sortfirstasc'><div><strong>Heure</strong></div></th>
                <th class='sortfirstasc'><div><strong>Type de transaction</strong></div></th>
                <th class='sortfirstasc'><div><strong>Montant</strong></div></th>
                <th class='sortfirstasc'><div><strong>Statut</strong></div></th>
                <th class='sortfirstasc'><div><div><strong>No. Facture
    </strong></div><div><strong>No. Client</strong></div></div></th>
                <th class='sortfirstasc'><div><strong>No. Vendeur</strong></div></th>
                <th class='sortfirstasc'><div><strong>No. Cheque</strong></div></th>
                </tr>
                </thead>";
                             $y=0;
                             $color=array(1=>"Lavender",2=>"LightCyan");
                            // recherche les donnees dans la base selon les informations fournies
                            $qaff= mysql_query("SELECT distinct j.idj,j.date_trans,j.heure_trans,j.status_trans,j.montant_trans,j.status_trans,j.num_fac,j.num_vendeur,j.num_check, i.lieu FROM journal j, identification i where j.num_com=i.num_com and j.num_com='".$_SESSION[client]["num_com"]."' and j.date_trans between'". $_GET["entre_date"]."' and '".$_GET["fin_date"]."' and lieu='".$_GET["choix_lieux"]."' and i.num_tpe='".$_GET["choix_tpe"]."'and j.num_vendeur='".$_GET["No_vendeur"]."'");
            
                            while($rowaff=mysql_fetch_array($qaff)) {
                            $y++;
                                if($i==2){$i=0;}  
                                $i++;
                                echo"<tr bgcolor='".$color[$i]."' onmouseover=\"this.style.background='#D8D8D8'\" onmouseout=\"this.style.background='".$color[$i]."'\" >";
                                echo"<td align='center'>".$rowaff["idj"]."</td>";
                                echo"<td align='center'>".$rowaff["date_trans"]."</td>";
                                echo"<td align='center'>".$rowaff["heure_trans"]."</td>";
                                echo"<td align='center'>".$rowaff["status_trans"]."</td>";
                                echo"<td align='center'>".$rowaff["montant_trans"]."</td>";
                                echo"<td align='center'>".$rowaff["status_trans"]."</td>";
                                echo"<td align='center'>".$rowaff["num_fac"]."</td>";
                                echo"<td align='center'>".$rowaff["num_vendeur"]."</td>";
                                echo"<td align='center'>".$rowaff["num_check"]."</td>";
                                echo"</tr>";
                            
                            }
                               
                            echo "</table>";
     
    ?>

  4. #4
    Expert éminent sénior

    Homme Profil pro
    Inscrit en
    Janvier 2007
    Messages
    13 474
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Isère (Rhône Alpes)

    Informations professionnelles :
    Secteur : Finance

    Informations forums :
    Inscription : Janvier 2007
    Messages : 13 474
    Points : 36 571
    Points
    36 571
    Par défaut
    Bonjour,
    visiblement ton problème de tri dépend uniquement de l'ordre de tri de ta requête SQL elle-même ...

    A+
    Pour tout savoir sur l'utilisation du forum

    En postant votre message, n'oubliez pas les Règles du Club.

  5. #5
    Membre à l'essai
    Inscrit en
    Avril 2008
    Messages
    25
    Détails du profil
    Informations forums :
    Inscription : Avril 2008
    Messages : 25
    Points : 19
    Points
    19
    Par défaut Re à E.Bzz
    Citation Envoyé par E.Bzz Voir le message
    Bonjour,
    visiblement ton problème de tri dépend uniquement de l'ordre de tri de ta requête SQL elle-même ...

    A+
    Je n'ai pas un problème de tri. Ce que je voudrais faire c'est au niveau de javascript. Je souhaite faire qu'à chaque click sur l'en-tete du tableau, l'ordre d'affichage change(en Anglais column sort), ça fonctionne quand j'utilise du pure HTML et PHP, mais quand j'utilise Ajax ça bloque, je perd cette dynamicité.

  6. #6
    Membre expérimenté Avatar de DoubleU
    Profil pro
    Inscrit en
    Janvier 2006
    Messages
    1 106
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Janvier 2006
    Messages : 1 106
    Points : 1 388
    Points
    1 388
    Par défaut
    Je l'ai fait ya pas longtemps mais pas avec un tableau, donc je ne pourrai pas te dire comment réorganiser tes lignes.

    Par contre, jpeux te filer un tips sur comment effectuer le tri ^^:

    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
    function compareValues(cell1, cell2){
     
    	var val1 = cell1.getValue();
    	var val2 = cell2.getValue();
     
    	if (parseInt(val1) && parseInt(val2)){
    		val1 = parseInt(val1);
    		val2 = parseInt(val2);
    	}
     
    	else{
    		val1 = String(val1);
    		val2 = String(val2);
    	}
     
    	return val1 > val2 ? 1 : -1;
    }
     
    arrayToSort.sort(compareValues);
    En gros, tu définies une fonction a 2 paramètres qui retourne 1 si une valeur val1 doit être rangée apres val2, ou -1 dans le contraitre. Tu peux comme ca définir comment doivent être triées tes cellules.
    Et apres, tu utilises la méthode sort de l'objet Array, en lui passant cette fonction en argument.

    Te reste plus qu'a réorganiser ton tableau maintenant ^^

  7. #7
    Expert éminent sénior

    Homme Profil pro
    Inscrit en
    Janvier 2007
    Messages
    13 474
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Isère (Rhône Alpes)

    Informations professionnelles :
    Secteur : Finance

    Informations forums :
    Inscription : Janvier 2007
    Messages : 13 474
    Points : 36 571
    Points
    36 571
    Par défaut
    Citation Envoyé par tetepro Voir le message
    Je n'ai pas un problème de tri. Ce que je voudrais faire c'est au niveau de javascript. Je souhaite faire qu'à chaque click sur l'en-tete du tableau, l'ordre d'affichage change(en Anglais column sort),
    Oui, et en français : tri.

    Pour tout savoir sur l'utilisation du forum

    En postant votre message, n'oubliez pas les Règles du Club.

  8. #8
    Rédacteur

    Avatar de Bovino
    Homme Profil pro
    Développeur Web
    Inscrit en
    Juin 2008
    Messages
    23 647
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 53
    Localisation : France, Gironde (Aquitaine)

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

    Informations forums :
    Inscription : Juin 2008
    Messages : 23 647
    Points : 91 220
    Points
    91 220
    Billets dans le blog
    20
    Par défaut
    Selon moi, d'après ce que je vois de ton code et sans avoir eu trop de temps de m'y plonger (désolé) il te manque un gestionnaire d'événement sur les th de ton table qui appelleraient ta fonction ajax avec comme paramètre supplémentaire l'option de tri choisie.

    Malheureusement, je ne vois pas où tu appelles cette fonction et si c'est au chargement ou à la soumission d'un formulaire, ajax ne sert pas à grand chose (du moins c'est mon avis).

    En gros, si j'ai bien compris ce que tu veux faire (à partir de données entrées par l'utilisateur, créer un tableau triable), tu devrais donc ajouter à ta fonction requestInfo(url,id) un 3e argument (celui qui correspond au tri) avec une valeur par défaut qui serait appelée au chargement de la page, puis au clic sur les th de ta table (<th onclick="javascript:requestInfo(url,id,tri)">)...
    Pas de question technique par MP !
    Tout le monde peut participer à developpez.com, vous avez une idée, contactez-moi !
    Mes formations video2brain : La formation complète sur JavaScriptJavaScript et le DOM par la pratiquePHP 5 et MySQL : les fondamentaux
    Mon livre sur jQuery
    Module Firefox / Chrome d'intégration de JSFiddle et CodePen sur le forum

  9. #9
    Membre expérimenté Avatar de DoubleU
    Profil pro
    Inscrit en
    Janvier 2006
    Messages
    1 106
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Janvier 2006
    Messages : 1 106
    Points : 1 388
    Points
    1 388
    Par défaut
    Ya pas besoin de faire une nouvelle requête pour trier le tableau...

  10. #10
    Membre à l'essai
    Inscrit en
    Avril 2008
    Messages
    25
    Détails du profil
    Informations forums :
    Inscription : Avril 2008
    Messages : 25
    Points : 19
    Points
    19
    Par défaut
    Merci DoubleU,
    je vais utiliser votre technique, je pense déjà que vous m'orientez sur la bonne direction.

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

Discussions similaires

  1. Réponses: 11
    Dernier message: 22/01/2010, 21h17
  2. comment affecter à un datagrid, les données d'une table ?
    Par WBO dans le forum Général Dotnet
    Réponses: 0
    Dernier message: 24/12/2008, 12h59
  3. Réponses: 1
    Dernier message: 10/06/2007, 07h22
  4. Réponses: 9
    Dernier message: 22/01/2007, 17h11

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