[AJAX] Compléter un tableau avec Ajax

Version imprimable

07/02/2008, 11h29
nic2t

[AJAX] Compléter un tableau avec Ajax
Bonjour à tous et à toutes!
J'éspere que vous allez pouvoir m'aider...

ça fait quelques jours que j'essaye de remplir un tableau html avec de l'ajax...
je donne un exemple plus simple:

sur ma page principale : j'ai un tableau avec 2 colonne d'en tete : un <th> Numero et un input texte</th> et un <th>nom et input texte </th>

mon ajax recupere la valeur des input, execute la requete dans ma 2eme page php et me renvoie un tableau...

mais en essayant de la mettre dans un div a la suite du tableau je n'ai pas reussi a l'afficher :
Code:

1 2 3 4 5 6 7 8 <table> <tr> <th>num et input</th><th>nom et input</th> </tr> <div id=nana> </div> </table>
et ma 2eme page me renvoyé un autre <tr><td>les numero</td><td>les nom</td></tr>

et ça ne marche pas... alors j'ai du faire un 2ème tableau une premier pour les en tete, et un deuxieme qui est envoyé par ma 2eme page php...
mais j'arrive pas a bien les aligner....

Si vous avez une idée.. j'en serais ravi !

Merci d'avance...
Cordialement
Nicolas
07/02/2008, 11h46
E.Bzz
Bonjour,
tu ne peux pas insérer un div comme ça entre </tr> et </table>.
Code:

1 2 3 4 5 6 7 <table> <tr> <th>num et input</th><th>nom et input</th> </tr> </table> <div id=nana> </div>
Ne convient pas ?

A+
07/02/2008, 13h31
nic2t

Déja essayé

Désolé, mais j'ai oublié de marquer que mon <div> </div> a été testé entre </tr> et </table>, aussi entre 2 <td> qui m'affichait tout dans la même colonne.... et aussi entre 2 <tr> (la solution logique je pensais...) mais cette dernière n'a pas fonctionné...rien ne s'affichait...

Pour votre solution, merci quand même, mais je l'ai déja essayé...
Mais malheureusement je n'ai pas reussi à la faire fonctionner, car dans ce cas là, il faut faire 2 tableau et le tableau venant de php ne s'aligne pas avec celui de ma page principale.... même en fixant les colonnes il y a des divergences....
Si vous avez une autre solution, ou une technique pour bloquer la taille des cellules...
Merci.
07/02/2008, 14h05
E.Bzz

Citation:

Envoyé par nic2t

même en fixant les colonnes il y a des divergences....
Si vous avez une autre solution, ou une technique pour bloquer la taille des cellules...

On peut voir ?
Parce qu'a priori, c'est la solution :?

A+
07/02/2008, 14h10
nic2t

Vous voulez voir quoi? le site est sur un intranet...
je peux rien sortir... désolé...

en gros en faisant comme vous le dites, j'ai 2 tableaux, l'un au dessus de l'autre (ce qui me gène pas) mais sur les 8 colonnes que j'ai, les colonnes (qui ont toutes la même taille) se décalent de quelques petits pixels hyper génant a l'oeil précis du chef :p...

Il n'y a aucun moyen de remplir un tableau HTML avec de l'Ajax???

Merci d'avance.
Nicolas
07/02/2008, 14h17
E.Bzz

Citation:

Envoyé par nic2t

Vous voulez voir quoi?

Ben le code qui génère 2_tableaux_qui_devraient_être_alignés_mais_qui_ne_le_sont_pas :mrgreen:
Pas besoin d'url ;)

A+

OK je vous montre le code !! Le voici et merci de vous préoccuper de mon problème...
J'ai pas mis l'ajax trop de blabla pour rien le tableau est ici =>

Celui ci c'est la page principale appelante...

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
 
 
	<html>
	<head>
 
	<title>Liste des Matériels Informatiques</title>
 
	<!-- CSS -->
	<link rel="stylesheet" type="text/css" href="css_tableau.css">
	</head>
 
	<BODY BGCOLOR="#FFFacd" TEXT="#000000" onload="mainLoop()">
 
<form id=attribution action="">
		 <table border=1 cellPadding=4 cellSpacing=0 bordercolor=#FFFFFF bgcolor=#F1E1BE class=textetableau>
			 <tr>
				<th bgcolor=#9EE757 class=td_service>Service<br/><input type="text" id="service" size="10"/></th>
				<th bgcolor=#9EE757 class=td_nom>Nom<br/><input type="text" id="nom" size="17"/></th>
				<th bgcolor=#9EE757 class=td_prenom>Prénom<br/><input type="text" id="prenom" size="10"/></th>
				<th bgcolor=#9EE757 class=td_nr>Nr<br/><input type="text" id="nr" size="10"/></th>
			</tr>
		</table>
 
</form>		
				<div id=div_liste_att>
 
				</div>
 
<?php
        echo "</body></html>";
 
?>

Celui ci c'est le code php qui renvoi le tableau (mais que j'aimerais bien qu'il complète mon premier tableau...)

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
<?php
 
 
 
$rsql =REQUETE
 
	$resultats = mysql_query($rsql) or die(mysql_error());
 
echo(utf8_encode( "<table border=1 cellPadding=4 cellSpacing=0 bordercolor=#FFFFFF bgcolor=#F1E1BE style='overflow:auto' class=textetableau>"));
 
	while ($ligne = mysql_fetch_assoc($resultats)) {
 
	 echo(utf8_encode("<tr><td valign=top align=left class=td_service>"));
	  affiche_lien_v2("./affiche_service.php?idservice=".$ligne['service'], $ligne['service'], "", "", "");
	  echo(utf8_encode( "&nbsp;</td>"));
 
	  echo(utf8_encode( "<td valign=top align=left class=td_nom>"));
	  affiche_lien_v2("./affiche_utilisateurs.php?iduser=".$ligne['id_utilisateur'], $ligne['nom'], "", "", "");
	  echo(utf8_encode( "&nbsp;</td>"));
	  echo(utf8_encode( "<td valign=top align=left class=td_prenom>".$ligne['prenom']."&nbsp;</td>"));
 
   echo(utf8_encode( "<td valign=top align=left class=td_nr>"));
    affiche_lien_v2("./affiche_materiel.php?idmateriel=".$ligne['id_materiel'], $ligne['nr'], "", "", "");
    echo(utf8_encode( "&nbsp;</td>"));
 
	 echo(utf8_encode( "</tr>"));
	}
	echo(utf8_encode( "</table>"));
}
?>

la j'ai essayé de bloquer les cellules avec du css, mais l'origine c'était dans les td du tableau.. voila

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
.textetableau 
{
color: #000000;
font-family: Verdana, Arial, Helvetica, sans-serif; 
font-size: 10px;
width:1070px;
}
 
.td_nom
{
width:150px;
overflow:auto;
}
 
.td_prenom
{
width:150px;
overflow:auto;
}
 
.td_service
{
width:150px;
overflow:auto;
}
 
.td_nr
{
width:120px;
overflow:auto;
}

Merci d'avance, en espérant que cela vous aide plus...
Cordialement.
Nicolas

07/02/2008, 14h52
E.Bzz

A réception de la réponse Ajax, tu fais

Code:

document.getElementById('div_liste_att').innerHTML = xhr.responseText;

?
Si oui, les autres styles (par ex. les couleurs) sont-ils pris en compte ?
Est-ce dans ce cas que tu as les quelques pixels de décalage qui gênent l'oeil exercé du boss ?

A+
07/02/2008, 15h03
nic2t

Oui, dans mon ajax je fais le document.getelement(...) et les couleurs sont parfaitement respecter, si je change la couleur dans le css, ça le change dans les 2 tableaux : le css fonctionne, mais les cellules se décalent..
Le tableau a bien la même taille (ne dépasse pas), mais la cellule nom par exemple empiete sur les cellules service et prénom... c'est pas trés esthétique...

Vous ne voyez pas un moyen de continuer à remplir le premier tableau, ce qui me semble être la meilleur solution... ou tout autre solution est, bien sur, la bienvenue,:mouarf::mouarf: ça fait 2 jours que je cherche la solution entre 2 autres travaux...

Merci
Cordialement.
Nicolas

Citation:

Envoyé par nic2t

Vous ne voyez pas un moyen de continuer à remplir le premier tableau, ce qui me semble être la meilleur solution...

Bien sûr !
Mais ça va te changer du innerHTML :mouarf:

Pour l' "empiètement", je vois pas bien :?
Tu as essayé de passer en overflow:hidden pour les td ?
Sinon, ça peut aussi se jouer à se niveau là

Code:

cellPadding=4 cellSpacing=0

Quoique je vois pas comment il peut y avoir "dépassement" ?

Bref, chez moi (IE6 et FF2), ton tableau est parfaitement aligné :

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
<html>
<head>
<style type="text/css">
.textetableau
{
color: #000000;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
width:1070px;
}
 
.td_nom
{
width:150px;
overflow:auto;
}
 
.td_prenom
{
width:150px;
overflow:auto;
}
 
.td_service
{
width:150px;
overflow:auto;
}
 
.td_nr
{
width:120px;
overflow:auto;
}
</style>
</head>
	<BODY BGCOLOR="#FFFacd" TEXT="#000000">
 
<form id=attribution action="">
		 <table border=1 cellPadding=4 cellSpacing=0 bordercolor=#FFFFFF bgcolor=#F1E1BE class=textetableau>
			 <tr>
				<th bgcolor=#9EE757 class=td_service>Service<br/><input type="text" id="service" size="10"/></th>
				<th bgcolor=#9EE757 class=td_nom>Nom<br/><input type="text" id="nom" size="17"/></th>
				<th bgcolor=#9EE757 class=td_prenom>Prénom<br/><input type="text" id="prenom" size="10"/></th>
				<th bgcolor=#9EE757 class=td_nr>Nr<br/><input type="text" id="nr" size="10"/></th>
			</tr>
		</table>
 
</form>
 
<div id=div_liste_att>
	<table border=1 cellPadding=4 cellSpacing=0 bordercolor=#FFFFFF bgcolor=#F1E1BE style='overflow:auto' class=textetableau>
	<tr><td valign=top align=left class=td_service>zmrljgeml&nbsp;</td>
		<td valign=top align=left class=td_nom>zefz&nbsp;</td>
		<td valign=top align=left class=td_prenom>toto&nbsp;</td>
		<td valign=top align=left class=td_nr>gergerg&nbsp;</td>
	</tr>
	<tr><td valign=top align=left class=td_service>ergeg&nbsp;</td>
		<td valign=top align=left class=td_nom>egrge&nbsp;</td>
		<td valign=top align=left class=td_prenom>toto&nbsp;</td>
		<td valign=top align=left class=td_nr>eahtrhazeth&nbsp;</td>
	</tr>
	<tr><td valign=top align=left class=td_service>ergeg&nbsp;</td>
		<td valign=top align=left class=td_nom>egrge&nbsp;</td>
		<td valign=top align=left class=td_prenom>toto&nbsp;</td>
		<td valign=top align=left class=td_nr>eahtrhazeth&nbsp;</td>
	</tr>
	</table>
 
</div>
 
</body>
</html>

A+

07/02/2008, 15h32
nic2t

le overflow:hidden je l'ai essayé aussi... ça ne change rien...
ceci dit j'ai pas essayé en changeant les "cellPadding=4 cellSpacing=0"
je vais le faire et je vous tiens au courant...

et je vais tester votre code, mais je pense que celui ci va etre aligné aussi chez moi.. c'est l'ajax et les données provenant de la base qui le font varié...

Peut être, est ce aussi un problème à cause des utf8_encode()?

Pour ce qui est de l'ajout de nouvelles lignes dans mon tableau, il faudrait que mon ajax raméne le nombre de ligne, qu'il rajoute le nombre de ligne à mon tableau, et ensuite extraire les données de la bd et les ajouter a chaque ligne précédement créé... j'avoue que c'est bcp plus difficile et plus lourd surtout, car la bd a 40 000 lignes, si je dois créer ne serait que 1000 nouvelles lignes en js, c'est assez long, non? je ne m'y connais pas trop en Ajax, veuillez m'en excuser...

Merci beaucoup.
Cordialement.
Nicolas

Citation:

Envoyé par nic2t

c'est l'ajax et les données provenant de la base qui le font varié...

L'Ajax en lui même, non !
En effet, ça revient à

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
<html>
<head>
<script type="text/javascript">
function rempli() {
	var chaine = "";
	chaine=	"<table border=1 cellPadding=4 cellSpacing=0 bordercolor=#FFFFFF bgcolor=#F1E1BE style='overflow:auto' class=textetableau>";
	chaine+=	"<tr><td valign=top align=left class=td_service>zmrljgeml&nbsp;</td>";
	chaine+=	"<td valign=top align=left class=td_nom>zefz&nbsp;</td>";
	chaine+=	"<td valign=top align=left class=td_prenom>toto&nbsp;</td>";
	chaine+=	"<td valign=top align=left class=td_nr>gergerg&nbsp;</td>";
	chaine+=	"</tr>";
	chaine+=	"<tr><td valign=top align=left class=td_service>ergeg&nbsp;</td>";
	chaine+=	"<td valign=top align=left class=td_nom>egrge&nbsp;</td>";
	chaine+=	"<td valign=top align=left class=td_prenom>toto&nbsp;</td>";
	chaine+=	"<td valign=top align=left class=td_nr>eahtrhazeth&nbsp;</td>";
	chaine+=	"</tr>";
	chaine+=	"<tr><td valign=top align=left class=td_service>ergeg&nbsp;</td>";
	chaine+=	"<td valign=top align=left class=td_nom>egrge&nbsp;</td>";
	chaine+=	"<td valign=top align=left class=td_prenom>toto&nbsp;</td>";
	chaine+=	"<td valign=top align=left class=td_nr>eahtrhazeth&nbsp;</td>";
	chaine+=	"</tr>";
	chaine+=	"</table>";
document.getElementById('div_liste_att').innerHTML=chaine;
}
</script>
<style type="text/css">
.textetableau
{
color: #000000;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
width:1070px;
}
 
.td_nom
{
width:150px;
overflow:auto;
}
 
.td_prenom
{
width:150px;
overflow:auto;
}
 
.td_service
{
width:150px;
overflow:auto;
}
 
.td_nr
{
width:120px;
overflow:auto;
}
</style>
</head>
	<BODY BGCOLOR="#FFFacd" TEXT="#000000" onload="rempli();">
 
<form id=attribution action="">
		 <table border=1 cellPadding=4 cellSpacing=0 bordercolor=#FFFFFF bgcolor=#F1E1BE class=textetableau>
			 <tr>
				<th bgcolor=#9EE757 class=td_service>Service<br/><input type="text" id="service" size="10"/></th>
				<th bgcolor=#9EE757 class=td_nom>Nom<br/><input type="text" id="nom" size="17"/></th>
				<th bgcolor=#9EE757 class=td_prenom>Prénom<br/><input type="text" id="prenom" size="10"/></th>
				<th bgcolor=#9EE757 class=td_nr>Nr<br/><input type="text" id="nr" size="10"/></th>
			</tr>
		</table>
 
</form>
 
<div id=div_liste_att>
 
</div>
 
 
</body>
</html>

qui donne exactement le même résultat ...

Si tu pouvais poster le code généré avec les véritables données récupérées, ça permettrait de vérifier ...

A+

07/02/2008, 16h30
nic2t

j'ai supprimé une colonne inutile a mon projet(on la retrouve ailleurs..) et les tableaux s'alignent parfaitement... j'ai essayé avec une autre colonne pour voir si c'était celle là qui buggé mais en fait c'était la 8ème.. peut etre le tableau n'était pas assez grand? et beh non même en l'augmentant a 1600 px ça n'a pas arrangé le problème.. mon tableau se devait d'avoir 7 colonnes!
qu'il en soit ainsi :mouarf:

je vous remercie de toute l'aide que vous m'avez apporter, mais je je vais le laisser comme ça, ça ira parfaitement....mais si j'aurais préféré faire un seul tableau... ! le chef est ok alors c'est bon ;)

Merci beaucoup.:king:
Bonne soirée.
Cordialement.
Nicolas
07/02/2008, 16h35
E.Bzz

Citation:

Envoyé par nic2t

peut etre le tableau n'était pas assez grand? et beh non même en l'augmentant a 1600 px ça n'a pas arrangé le problème.. mon tableau se devait d'avoir 7 colonnes!

Peut être un décalage entre le nb de colonnes dans la page et le nombres de td ramenés par Ajax (7/8) :?

A+