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

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

RE:

Citation:

Envoyé par Bovino

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:

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:

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>";
 
?>

Bonjour,
visiblement ton problème de tri dépend uniquement de l'ordre de tri de ta requête SQL elle-même ...

A+

Re à E.Bzz

Citation:

Envoyé par E.Bzz

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

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:

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 ^^

Citation:

Envoyé par tetepro

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.

:roll:

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)">)...

Ya pas besoin de faire une nouvelle requête pour trier le tableau...

Merci DoubleU,
je vais utiliser votre technique, je pense déjà que vous m'orientez sur la bonne direction.