Asp - affichage en tableau :

Dernière mise à jour le par jreaux62 .

Mon tutorial original se trouve ici :
http://www.asp-php.net/tutorial/asp-php/tableaux.php
<?xml:namespace prefix o ns "urn:schemas-microsoft-com:office:office" /?>

Tables simples 


| <table class=\"MsoNormalTable\" cellpadding=\"0\" border=\"1\"> |-
<table>
   |-

      | ligne1 colonne1

      | ligne1 colonne2

      | ligne1 colonne3

      | ligne1 colonne4

   
   |-

      | ligne2 colonne1

      | ligne2 colonne2

      | ligne2 colonne3

      | ligne2 colonne4

   
...

Structure d'un tableau (table) : affiche

</td> </tr> </tbody> </table>

</td> <td width="50%">

ligne1 colonne1 ligne1 colonne2 ligne1 colonne3 ligne1 colonne4
ligne2 colonne1 ligne2 colonne2 ligne2 colonne3 ligne2 colonne4
...      

</td> </tr> </tbody> </table>

a- Tableau de NbrCol colonnes par NbrLigne lignes :


| <table class=\"MsoNormalTable\" cellpadding=\"0\" border=\"1\"> |-
<html>
<%
' NbrCol : le nombre de colonnes
' NbrLigne : le nombre de lignes
' --------------------------------------------------------
response.write \\"<table>\\"
for i=1 to NbrLigne step 1
   response.write \\"|-
\\"
   for j=1 to NbrCol step 1
         response.write \\"| \"
          ' ------------------------------------------
          ' AFFICHAGE ligne i, colonne j
         response.write affichage
          ' ------------------------------------------
         response.write \"
\\"
   next
   response.write \\"\\"
   j=1
next

write "

"
%>
</html>

</td> </tr> </tbody> </table>

</td> </tr> </tbody> </table>

b- Table de multiplication :

exemple amélioré

i X j 1 2 3 4 5 6 7 8 9
1 1 2 3 4 5 6 7 8 9
2 2 4 6 8 10 12 14 16 18
3 3 6 9 12 15 18 21 24 27
4 4 8 12 16 20 24 28 32 36
5 5 10 15 20 25 30 35 40 45
6 6 12 18 24 30 36 42 48 54
7 7 14 21 28 35 42 49 56 63
8 8 16 24 32 40 48 56 64 72
9 9 18 27 36 45 54 63 72 81

 


| <table class=\"MsoNormalTable\" cellpadding=\"0\" border=\"1\"> |-
<html>
<%
' NbrCol : le nombre de colonnes
' NbrLigne : le nombre de lignes
NbrCol = 9
NbrLigne = 9
' --------------------------------------------------------
' on affiche en plus sur les 1ere ligne et 1ere colonne 
' les valeurs a multiplier (dans des cases en couleur)
' le tableau fera donc 10 x 10
' --------------------------------------------------------
response.write \\"<table border=\\"\\"1\\"\\" width=\\"\\"400\\"\\">\\"
' 1ere ligne (ligne 0)
   response.write \\"|-
\\"
   response.write \\"| \"
   response.write \"i X j
\\"
   for j=1 to NbrCol step 1
      response.write \\"| \"
      response.write j & \"
\\"
   next   
   response.write \\"\\"
' --------------------------------------------------------
' lignes suivantes
for i=1 to NbrLigne step 1
   response.write \\"|-
\\"
   for j=1 to NbrCol step 1
       ' 1ere colonne (colonne 0)
      if (j=1) then
         response.write \\"| \"
         response.write i & \"
\\"
      end if
       ' colonnes suivantes
      if (i=j) then
         response.write \\"| \"
      else
         response.write \"
\\"
      end if
       ' ------------------------------------------
       ' AFFICHAGE ligne i, colonne j
      response.write i*j
       ' ------------------------------------------
      response.write \\"</td>\\"
   next
   response.write \\"\\"
   j=1
next

write "

"
%>
</html>

</td> </tr> </tbody> </table>

</td> </tr> </tbody> </table>

Affichage "en ligne" avec array()

Affichage d'un certains nombres de données dans un tableau :
- On veut que le tableau fasse un nombre déterminé de colonnes.
Mais on ne connait pas à l'avance le nombre de données récupérées :
- il faut donc pouvoir afficher (automatiquement) autant de lignes que nécessaire.

Récupération des éléments d'un tableau Array()
A noter : le premier indice d'un array() est 0 (zéro)
a- AVEC calcul du nombre de lignes AVANT affichage


| <table class=\"MsoNormalTable\" cellpadding=\"0\" border=\"1\"> |-
elt0

</td> | elt1

L'exemple ci-dessous affiche : le code généré :
elt2 elt3
elt4 elt5    

</td> <td width="50%">


| <table border=\"1\">
   |-

      
elt0</td>
      | elt1

      | elt2

      | elt3

   
   |-

      | elt4

      | elt5

      | &nbsp;

      | &nbsp;

   

</td> </tr> </tbody> </table>

</td> </tr> </tbody> </table>
 


| <table class=\"MsoNormalTable\" cellpadding=\"0\" border=\"1\"> |-
<html>
<%
' NbreData : le nombre de données a afficher
' NbrCol : le nombre de colonnes
' NbrLigne : calcul automatique AVANT affichage
' --------------------------------------------------------
' (exemple)
NbrCol = 4
tableau = array(\\"elt0\\",\\"elt1\\",\\"elt2\\",\\"elt3\\",\\"elt4\\",\\"elt5\\")
' --------------------------------------------------------
NbreData = ubound(tableau)+1
' --------------------------------------------------------
' calcul du nombre de lignes
if (round(NbreData/NbrCol)<>(NbreData/NbrCol)) then
   NbrLigne = round((NbreData/NbrCol)+0.5)
else
   NbrLigne = NbreData/NbrCol
end if
' --------------------------------------------------------
' affichage
if (NbreData <> 0) then
k = 0
==write "<table border=""1"">"==
for i=1 to NbrLigne step 1
   response.write \\"|-
\\"
   for j=1 to NbrCol step 1
      if (k<NbreData) then
         response.write \\"| \"
          ' ------------------------------------------
          ' AFFICHAGE de l'element
         response.write tableau(k)
          ' ------------------------------------------
         response.write \"
\\"
         k=k+1
      else    ' case vide
         response.write \\"| &nbsp;
\\"
      end if
   next
   response.write \\"|-
\\"
   j=1
next

write "

"
else

write "pas de données à afficher"

end if
%>
</html>

</td> </tr> </tbody> </table>
</td> </tr> </tbody> </table> b- SANS calcul du nombre de lignes

C'est une façon différente d'aborder le problème :
- affichage "tant qu'il y a des données ..." (while ...)

- L'astuce : on utilise la propriété "modulo" (Mod en ASP)
qui renvoie le reste de la division entière du 1er chiffre par le 2ème
Exemple :

1 Mod 4 = 1 2 Mod 4 = 2 3 Mod 4 = 3 4 Mod 4 = 0
5 Mod 4 = 1 6 Mod 4 = 2 7 Mod 4 = 3 8 Mod 4 = 0
9 Mod 4 = 1 ...    

Donc :
- quand le modulo = 1 : première colonne
- quand le modulo = 0 : dernière colonne

Le nombre de lignes (NbrLigne) est incrémenté au fur et à mesure :- on le récupère A <?xml:namespace prefix st1 ns "urn:schemas-microsoft-com:office:smarttags" /?><st1:personname w:st="on" productid="LA FIN.">LA FIN.</st1:personname> éventuellement
- ou on l'intercepte en cours de route (pour pagination)


| <table class=\"MsoNormalTable\" cellpadding=\"0\" border=\"1\"> |-
elt0

</td> | elt1

L'exemple ci-dessous affiche : le code généré :
elt2 elt3
elt4 elt5    

</td> <td width="50%">


| <table border=\"1\">
   |-

      
elt0</td>
      | elt1

      | elt2

      | elt3

   
   |-

      | elt4

      | elt5

   

</td> </tr> </tbody> </table>

</td> </tr> </tbody> </table>


| <table class=\"MsoNormalTable\" cellpadding=\"0\" border=\"1\"> |-
<html>
<%
' NbreData : le nombre de données a afficher
' NbrCol : le nombre de colonnes
' NbrLigne : calcul automatique a la FIN
' --------------------------------------------------------
' (exemple)
NbrCol = 4
tableau = array(\\"elt0\\",\\"elt1\\",\\"elt2\\",\\"elt3\\",\\"elt4\\",\\"elt5\\")
' --------------------------------------------------------
NbreData = ubound(tableau)+1
' --------------------------------------------------------
' affichage
NbrLigne = 0
if (NbreData <> 0) then
k = 0
j = 1
==write "<table border=""1"">"==
while (k < NbreData)
   if (j Mod NbrCol = 1) then
      NbrLigne = NbrLigne + 1
      response.write \\"|-
\\"
      fintr = 0
   end if
   response.write \\"| \"
    ' ------------------------------------------
    ' AFFICHAGE de l'element
   response.write tableau(k)
    ' ------------------------------------------
   response.write \"
\\"
   k=k+1
   if (j Mod NbrCol = 0) then
      response.write \\"\\"
      fintr = 1
   end if
   j=j+1
wend
if (fintr<>1) then response.write \\"\\" end if

write "

"
else

write "pas de données à afficher"

end if
%>
</html>

</td> </tr> </tbody> </table>

</td> </tr> </tbody> </table>

Affichage "en ligne" avec base de données

Affichage de données récupérées par une requête dans une base de données.
- On veut afficher dans chaque case les données provenant d'un enregistrement
- On veut que le tableau fasse un nombre déterminé de colonnes.
Mais on ne connait pas à l'avance le nombre de données récupérées :
- il faut donc pouvoir afficher (automatiquement) autant de lignes que nécessaire.

Dans la partie "AFFICHAGE des DONNEES de la fiche" : Tout est possible !
- afficher plusieurs données,
- afficher des images,
- les organiser dans un tableau,
- ajouter des liens hypertext,
- ...

Même principe que "b- SANS calcul du nombre de lignes" :
- affichage "tant qu'il y a des données ..." while ...
- L'astuce : on utilise la propriété "modulo"

Exemple
La table MATABLE :

champs valeurs
NUM 1 2 3 4 5 6 7 8 9 10
DONNEE banane betterave boule pomme ananas baie bille citron bonbon ballon
TYPE fruit legume jouet fruit fruit fruit jouet fruit douceur jouet

La requête : toutes les données commençant par un "b", classées par ordre alphabétique.


| <table class=\"MsoNormalTable\" cellpadding=\"0\" border=\"1\"> |-
baie
fruit

</td> | ballon
jouet

L'exemple ci-dessous affiche : le code généré :
banane
fruit		 betterave
legume
bille
jouet		 bonbon
douceur		 boule
jouet		  

</td> <td width="50%">


| <table border=\"1\">
   |-

      
baie
fruit </td>
      | ballon
jouet

      | banane
fruit

      | betterave
legume

   
   |-

      | bille
jouet

      | bonbon
douceur

      | boule
jouet

   

</td> </tr> </tbody> </table>

</td> </tr> </tbody> </table>

 


| <table class= \"MsoNormalTable\" cellpadding=\"0\" border=\"1\"> |-
<!-- #include file=\\"_Connexion.asp\\"-->
<html>
<%
' NbreData : le nombre de données a afficher
' NbrCol : le nombre de colonnes
' NbrLigne : calcul automatique a la FIN
' --------------------------------------------------------
' (exemple)
NbrCol = 4
' requete
latable = \\"MATABLE\\"
condition = \\" WHERE DONNEE LIKE 'b% '  ORDER BY DONNEE ASC\\"
SQL = \\"SELECT * FROM \\"& latable & condition &\\";\\"
Set RS = server.createobject(\\"ADODB.Recordset\\")
====
' --------------------------------------------------------
NbreData = RS.recordcount
' --------------------------------------------------------
' affichage
NbrLigne = 0
if (NbreData <> 0) then
j = 1
==write "<table border=""1"">"==
while not RS.eof
   if (j Mod NbrCol = 1) then
      NbrLigne = NbrLigne + 1
      response.write \\"|-
\\"
      fintr = 0
   end if
   response.write \\"| \"
    ' ------------------------------------------
    ' AFFICHAGE des DONNEES de la fiche
   response.write RS.fields(\"DONNEE\")
   response.write \"
\"
   response.write \"\" & RS.fields(\"TYPE\") & \"\"
    ' ------------------------------------------
   response.write \"
\\"
   if (j Mod NbrCol = 0) then
      response.write \\"\\"
      fintr = 1
   end if
   j=j+1
====
wend
if (fintr<>1) then response.write \\"\\" end if

write "

"
else

write "pas de données à afficher"

end if
%>
</html>
<%
' deconnexion de la base
Conn.close : Set Conn=nothing
%>

</td> </tr> </tbody> </table>

</td> </tr> </tbody> </table>

Affichage "en Colonne"

Les scripts précédents affichent les données "en ligne".

Affichage des résultats "en colonne" :
- pour un nombre de lignes (NbreLigne) défini,
- il faut pouvoir afficher (automatiquement) autant de colonnes que nécessaire.
a- Solution 1
(la plus simple)
Exemple avec Array() (même principe avec Base de données)

Principe :
- une table d'une ligne (invisible),
- dans chaque cellule : création d'une table d'1 colonne et NbreLigne lignes,
- ajout de cellules supplémentaires "tant qu'on a des données ..."


| <table class= \"MsoNormalTable\" cellpadding=\"0\" border=\"0\"> |-
<table class=\\"MsoNormalTable\\" cellpadding=\\"0\\" border=\\"1\\"> |-
L'exemple ci-dessous affiche : le code généré :
elt0
elt1
elt2

</td> <td valign="top">

elt3
elt4
elt5

</td> <td valign="top">

elt6
elt7
elt8

</td> <td valign="top">

elt9

</td> </tr> </tbody> </table>

</td> <td width="50%">


| <table>|-

   

      <table border=\\"1\\">
      |-
| elt0

      |-
| elt1

      |-

elt2

      

   </td>
   <td valign="top">
      


| elt3

      |-
| elt4

      |-

- elt5

      

   </td>
   <td valign="top">
      


| elt6

      |-
| elt7

      |-

- elt8

      

   </td>
   <td valign="top">
      

- elt9

      

   </td>
</tr></table>

</td> </tr> </tbody> </table>

</td> </tr> </tbody> </table>
 


| <table class=\"MsoNormalTable\" cellpadding=\"0\" border=\"1\"> |-
html>
<%
' NbreData : le nombre de données a afficher
' NbrLigne : le nombre de lignes
' NbrCol : le nombre de colonnes : calcul automatique
' --------------------------------------------------------
' (exemple)
NbrLigne = 3
tableau = array(\\"elt0\\",\\"elt1\\",\\"elt2\\",\\"elt3\\",\\"elt4\\",\\"elt5\\" ,\\"elt6\\",\\"elt7\\",\\"elt8\\",\\"elt9\\")
' --------------------------------------------------------
NbreData = ubound(tableau)+1
' --------------------------------------------------------
NbrCol = 0
' affichage
if (NbreData <> 0) then
k = 0

write "<table>|-

\\"
while (k < NbreData)
   response.write \\"| \"
   response.write \"<table border=\"\"1\"\">\"
   for i=1 to NbrLigne step 1
      if (k < NbreData) then
         response.write \"|-
\\"
          ' ---------------------------------------
          ' AFFICHAGE de l'element
         response.write tableau(k)
          ' ---------------------------------------
         response.write \\"</td>\\"
         k=k+1
      end if
      if (i = NbrLigne) then
         response.write \"

"
         response.write "</td>"
      end if
   next
   NbrCol = NbrCol + 1
wend

write "</tr></table>"

else

write "pas de données à afficher"

end if
%>
</html>

</td> </tr> </tbody> </table>

</td> </tr> </tbody> </table>

b- Solution 2, avec Array()

La solution 1 est efficace, mais pas satisfaisante si on souhaite bien aligner toutes les cellules.

Principe :
- une seule table,
- le remplissage se fait ligne par ligne en testant le "modulo" :
Exemple
10 éléments (elt0 à elt9) sur 3 lignes.
On doit les afficher dans cet ordre : (voir le code généré)

ligne 0 : 0 Mod 3 3 Mod 3 6 Mod 3 = 9 Mod 3 = 0
ligne 1 : 1 Mod 3 4 Mod 3 7 Mod 3 = ... = 1
ligne 2 : 2 Mod 3 5 Mod 3 8 Mod 3 = ... = 2

 


| <table class=\"MsoNormalTable\" cellpadding=\"0\" border=\"1\"> |-
elt0

</td> | elt3

L'exemple ci-dessous affiche : le code généré :
elt6 elt9
elt1 elt4 elt7  
elt2 elt5 elt8  

</td> <td width="50%">


| <table border=\"1\">
   |-

      
elt0</td>
      | elt3

      | elt6

      | elt9

   
   |-

      | elt1

      | elt4

      | elt7

   
   |-

      | elt2

      | elt5

      | elt8

   

</td> </tr> </tbody> </table>

</td> </tr> </tbody> </table>

 


| <table class=\"MsoNormalTable\" cellpadding=\"0\" border=\"1\"> |-
<html>
<%
' NbreData : le nombre de données a afficher
' NbrLigne : le nombre de lignes
' NbrCol : le nombre de colonnes : calcul automatique
' --------------------------------------------------------
' (exemple)
NbrLigne = 3
tableau = array(\\"elt0\\",\\"elt1\\",\\"elt2\\",\\"elt3\\",\\"elt4\\",\\"elt5\\",\\"elt6\\",\\"elt7\\",\\"elt8\\",\\"elt9\\")
' --------------------------------------------------------
NbreData = ubound(tableau)+1
' --------------------------------------------------------
' affichage
if (NbreData <> 0) then
i = 0
NbrCol = 0
==write "<table border=""1"">"==
   for i=0 to NbrLigne-1 step 1
      response.write \\"|-
\\"
      j = 0
      while ((i+(j*NbrLigne)) Mod NbrLigne=i and (i+(j*NbrLigne))<NbreData)
         response.write \\"| \"
          ' ---------------------------------------
          ' AFFICHAGE de l'element
         k = i+(j*NbrLigne)
         response.write tableau(k)
          ' ---------------------------------------
         response.write \"
\\"
         j=j+1
         if (NbrCol < j) then NbrCol = j end if
      wend
   response.write \\"\\"
   next

write "

"
else

write "pas de données à afficher"

end if
%>
</html>

</td> </tr> </tbody> </table>
</td> </tr> </tbody> </table> c- Solution 2, avec base de données

Le script utilisant les indices de tableau :
- création d'un tableau array() contenant les données récupérées.


| <table class=\"MsoNormalTable\" cellpadding=\"0\" border=\"1\"> |-
baie
fruit

</td> | bille
jouet

L'exemple ci-dessous affiche : le code généré :
ballon
jouet		 bonbon
douceur
banane
fruit		 boule
jouet
betterave
legume		  

</td> <td width="50%">


| <table border=\"1\">
   |-

      
baie
fruit </td>
      | bille
jouet

   
   |-

      | ballon
jouet

      | bonbon
douceur

   
   |-

      | banane
fruit

      | boule
jouet

   
   |-

      | betterave
legume

   

</td> </tr> </tbody> </table>

</td> </tr> </tbody> </table>


| <table class=\"MsoNormalTable\" cellpadding=\"0\" border=\"1\"> |-
<!-- #include file=\\"_Connexion.asp\\"-->
<html>
<%
' NbreData : le nombre de données a afficher
' NbrLigne : le nombre de lignes
' NbrCol : calcul automatique
' --------------------------------------------------------
' (exemple)
NbrLigne = 4
' requete
latable = \\"MATABLE\\"
condition = 
\\" WHERE DONNEE LIKE 'b% ' ORDER BY DONNEE ASC\\"
SQL = \\"SELECT * FROM \\"& latable & condition &\\";\\"
Set RS = server.createobject(\\"ADODB.Recordset\\")
====
' --------------------------------------------------------
NbreData = RS.recordcount
' --------------------------------------------------------
' creation d'un tableau array() par donnees
   dim tableau1() : redim tableau1(NbreData-1)
   dim tableau2() : redim tableau2(NbreData-1)
k=0
while not RS.eof
   tableau1(k) = RS.fields(\\"DONNEE\\")
   tableau2(k) = RS.fields(\\"TYPE\\")
   k=k+1
====
wend
' --------------------------------------------------------
' affichage
if (NbreData <> 0) then
i=0
NbrCol=0
==write "<table border=""1"">"==
   for i=0 to NbrLigne-1 step 1
      response.write \\"|-
\\"
      j=0
      while ((i+(j*NbrLigne)) Mod NbrLigne=i and (i+(j*NbrLigne))<NbreData)
         response.write \\"| \"
          ' ---------------------------------------
          ' AFFICHAGE de l'element
         k = i+(j*NbrLigne)
         response.write tableau1(k)
         response.write \"
\"
         response.write \"\"&tableau2(k)&\"\"
          ' ---------------------------------------
         response.write \"
\\"
         j=j+1
         if (NbrCol < j) then NbrCol = j end if
      wend
   response.write \\"\\"
   next

write "

"
else

write "pas de données à afficher"

end if
%>
</html>
<%
==close : Set Conn=nothing==
%>

</td> </tr> </tbody> </table>
</td> </tr> </tbody> </table> Astuce :

Au lieu de créer un tableau array() pour chaque donnée récupérée (tableau1, tableau2, ...),
il est possible de créer un seul tableau array() :
- en PHP, c'est très simple et très pratique.
- en ASP, c'est plus délicat : il faut définir le nom des champs au moment de créer l'array().
(en savoir plus sur GetRows() : L'objet RecordSet - ADO GetRows Method )

-
<%
' ...
' --------------------------------------------------------
' creation d'un seul array avec toutes les donnees
' il faut indiquer ici le tableau des champs a recuperer

   tableau = RS.GetRows(,,array(\"DONNEE\",\"TYPE\"))

' ici, l indice de \"DONNEE\" est 0, celui de \"TYPE\" est 1
' --------------------------------------------------------
' affichage
' ...
          ' ---------------------------------------
          ' AFFICHAGE de l'element
         k = i+(j*NbrLigne)
         response.write tableau(0,k)
         response.write \"
\"
         response.write \"\"&tableau(1,k)&\"\"
          ' ---------------------------------------
' ...
%>

</td>

</td> </tr> </tbody> </table>

Adresse d'origine

Ce document intitulé « Asp - affichage en tableau : » issu de CodeS SourceS (codes-sources.commentcamarche.net) est mis à disposition sous les termes de la licence Creative Commons. Vous pouvez copier, modifier des copies de cette page, dans les conditions fixées par la licence, tant que cette note apparaît clairement.
Asp - redimensionner image + picto après upload
Connecter à une base de données Access en utilisant ASP.Net et C#
Rejoignez-nous