Jreaux ASP Affichage Donnees Tableau HTML

Affichage de donnes dans un tableau HTML
(provenant d'un array ou d'une Base de Donnes)
par Jrme Raux (Pages de jreaux62)

Date de publication : 20 septembre 2008 Dernire mise jour : 3 juillet 2011
ASP - Cration " la vole" d'un tableau html : Afficher "proprement" des donnes tabulaires provenant - d'un array(), - ou d'une base de donnes. Affichage - "en LIGNE" (les donnes sont affiches horizontalement ligne aprs ligne), - ou "en COLONNE" (affichage vertical colonne aprs colonne).
Affichage de donnes dans un tableau HTML par Jrme Raux (Pages de jreaux62)
I - Avant-Propos...........................................................................................................................................................3 II - Tables simples........................................................................................................................................................6 II-A - Structure d'un tableau HTML (table)............................................................................................................ 6 II-B - Tableau HTML simple de NbrCol colonnes par NbrLigne lignes..................................................................6 II-C - Table de multiplication : exemple amlior...................................................................................................7 III - Affichage "en ligne" avec array().......................................................................................................................... 9 III-A - Affichage "en ligne" avec array() - AVEC calcul du nombre de lignes ncessaires...................................11 III-B - Affichage "en ligne" avec array() - SANS calcul du nombre de lignes ncessaires...................................13 IV - Affichage "en ligne" avec Base de Donnes..................................................................................................... 18 V - Affichage "en colonne" avec array()....................................................................................................................23 V-A - Affichage "en Colonne" avec Array() - Solution 1...................................................................................... 24 V-B - Affichage "en Colonne" avec Array() - Solution 2...................................................................................... 26 VI - Affichage "en colonne" avec Base de Donnes.................................................................................................29 VI-A - Affichage "en Colonne" avec BD - Solution 1........................................................................................... 30 VI-C - Affichage "en Colonne" avec BD - Astuce................................................................................................ 31 VII - Pour aller plus loin : fonctions........................................................................................................................... 33 VIII - Pagination......................................................................................................................................................... 35 IX - Conclusion.......................................................................................................................................................... 36
-2Les sources prsentes sur cette pages sont libre de droits, et vous pouvez les utiliser votre convenance. Par contre cette page de prsentation de ces sources constitue une oeuvre intellectuelle protge par les droits d'auteurs. Copyright 2008 - Jrme Raux. Aucune reproduction, mme partielle, ne peut tre faite de ce site et de l'ensemble de son contenu : textes, documents, images, etc sans l'autorisation expresse de l'auteur. Sinon vous encourez selon la loi jusqu' 3 ans de prison et jusqu' 300 000 E de dommages et intrts. Droits de diffusion permanents accords developpez LLC.
I - Avant-Propos
On a souvent besoin, ou envie, d'afficher ses donnes "proprement" :

Donnes provenant d'un array() ; Ou d'une base de donnes.
La cration " la vole" d'un tableau html (table) est une bonne solution.
On peut aussi avoir besoin d'un affichage :

-> "En ligne" (les donnes sont affiches horizontalement ligne aprs ligne), -> Ou "en colonne" (affichage vertical colonne aprs colonne).
Ce tutorial traite ces diffrents cas. Avec les crans 16/9e (portable, ...), il devient intressant d'envisager d'afficher "en colonne" (hauteur fixe) --> scroll horizontal (a change du scroll vertical conventionnel !), donc original ! Liens/Tutos en rapport avec le sujet Grand dbutant Tutoriels ASP par Florian Tables HTML Les tableaux (XHTML et CSS) Array() FAQ tableaux array() Bases de donnes Utiliser une base de donnes PAGINATION Pagination bout de code par Immobilis Pagination tuto (hors DVP, mais trs bien expliqu) Dans tous les scripts qui suivent, vous verrez une partie : ' ------------------------' DONNEES A AFFICHER dans la cellule ' ................ ' ------------------------C'est cet endroit que VOUS intervenez ! Il s'agit du contenu des cellules du tableau. Les donnes afficher dpendent de VOS besoins : - plusieurs donnes peuvent tre affiches (textes, images, ...) - avec votre propre mise en page.
II - Tables simples II-A - Structure d'un tableau HTML (table)

Balises d'un tableau HTML <table> </table> balises de dbut et fin d'une table html <tr> </tr> (table row) range, ou ligne. <th> </th> (table head) cellules d'entte (cellules servant de titre aux colonnes) autant de fois qu'il y a de colonnes <td> </td> (table data) cellules de donnes (afficher du texte, des images, une table...) autant de fois qu'il y a de colonnes Autres balises Se rfrer au cours : Les tableaux (XHTML et CSS)
II-B - Tableau HTML simple de NbrCol colonnes par NbrLigne lignes
Tableau html simple

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" dir="ltr"> <head> <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" /> <title>Affichage Array en ligne - avec calcul du Nbreligne</title> </head> <body> <table> <tbody> -6Les sources prsentes sur cette pages sont libre de droits, et vous pouvez les utiliser votre convenance. Par contre cette page de prsentation de ces sources constitue une oeuvre intellectuelle protge par les droits d'auteurs. Copyright 2008 - Jrme Raux. Aucune reproduction, mme partielle, ne peut tre faite de ce site et de l'ensemble de son contenu : textes, documents, images, etc sans l'autorisation expresse de l'auteur. Sinon vous encourez selon la loi jusqu' 3 ans de prison et jusqu' 300 000 E de dommages et intrts. Droits de diffusion permanents accords developpez LLC.
Tableau html simple
<% ' NbrCol : le nombre de colonnes ' NbrLigne : le nombre de lignes ' -------------------------------------------------------for i=1 to NbrLigne step 1 %> <tr> <% for j=1 to NbrCol step 1 %> <td> <% ' ------------------------' DONNEES A AFFICHER dans la cellule (ligne i, colonne j) response.write "ligne " & i & ", colonne " & j ' ------------------------%> </td> <% next %> </tr> <% j=1 next %> </tbody> </table> </body> </html>
II-C - Table de multiplication : exemple amlior
Table de multiplication
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" dir="ltr"> <head> <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" /> <title>Affichage Array en ligne - avec calcul du Nbreligne</title> </head> <body> <table border="1" width="400"> <% ' Table de multiplication ' -------------------------------------------------------' 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) -7Les sources prsentes sur cette pages sont libre de droits, et vous pouvez les utiliser votre convenance. Par contre cette page de prsentation de ces sources constitue une oeuvre intellectuelle protge par les droits d'auteurs. Copyright 2008 - Jrme Raux. Aucune reproduction, mme partielle, ne peut tre faite de ce site et de l'ensemble de son contenu : textes, documents, images, etc sans l'autorisation expresse de l'auteur. Sinon vous encourez selon la loi jusqu' 3 ans de prison et jusqu' 300 000 E de dommages et intrts. Droits de diffusion permanents accords developpez LLC.
Table de multiplication
' le tableau final fera donc 10 x 10 ' -------------------------------------------------------' 1ere ligne (ligne 0) %> <thead> <tr> <th bgcolor="#CCCCCC">i X j</th> <% for j=1 to NbrCol step 1 %> <th bgcolor=""#FFFF66""><% response.write j %></th> <% next %> </tr> </thead> <tbody> <% ' lignes suivantes for i=1 to NbrLigne step 1 %> <tr> <% for j=1 to NbrCol step 1 ' 1ere colonne (colonne 0) if (j=1) then %> <td bgcolor="#FFFF66"><% response.write j %></td> <% end if ' colonnes suivantes if (i=j) then %> <td bgcolor="#FFCC66"> <% else %> <td> <% end if ' ------------------------' DONNEES A AFFICHER dans la cellule response.write i*j ' ------------------------%> </td> <% next %> </tr> <% j=1 next %> </tbody> </table> </body> </html>
III - Affichage "en ligne" avec array()
Affichage d'un certains nombres de donnes dans un tableau :

On veut que le tableau fasse un nombre dtermin de colonnes ; Mais on ne connait pas l'avance le nombre de donnes rcupres : il faut donc pouvoir afficher (automatiquement) autant de lignes que ncessaire.
- 10 Les sources prsentes sur cette pages sont libre de droits, et vous pouvez les utiliser votre convenance. Par contre cette page de prsentation de ces sources constitue une oeuvre intellectuelle protge par les droits d'auteurs. Copyright 2008 - Jrme Raux. Aucune reproduction, mme partielle, ne peut tre faite de ce site et de l'ensemble de son contenu : textes, documents, images, etc sans l'autorisation expresse de l'auteur. Sinon vous encourez selon la loi jusqu' 3 ans de prison et jusqu' 300 000 E de dommages et intrts. Droits de diffusion permanents accords developpez LLC.
Rcupration des lments d'un tableau Array() :

Le premier indice d'un array() est 0 (zro) le dernier indice est : ubound(tableau)
III-A - Affichage "en ligne" avec array() - AVEC calcul du nombre de lignes ncessaires
Premire mthode :

On dtermine le nombre de donnes afficher : ubound(tableau)+1, et on en dduit le nombre de cellules ncessaire. les cellules vides sont remplies avec un espace .
Affichage en ligne avec array() a- AVEC calcul du nombre de lignes

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" dir="ltr"> <head> <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" /> <title>Affichage Array en ligne - avec calcul du Nbreligne</title> </head> <body> <% ' exemple tableau = array("elt0","elt1","elt2","elt3","elt4","elt5") NbrCol = 4 ' -------------------------------------------------------' tableau : le tableau (array) des donnees a afficher ' NbrCol : le nombre de colonnes ' ------------------------' nombre de cellules a remplir NbreData = ubound(tableau)+1 ' ------------------------' calcul du nombre de lignes AVANT affichage 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 ' indice du tableau %> <table border="1"> <tbody> <% for i=1 to NbrLigne step 1 ' ligne i %> <tr> <% for j=1 to NbrCol step 1 ' colonne j if (k<NbreData) then %> <td> <% ' ------------------------' DONNEES A AFFICHER dans la cellule - 12 Les sources prsentes sur cette pages sont libre de droits, et vous pouvez les utiliser votre convenance. Par contre cette page de prsentation de ces sources constitue une oeuvre intellectuelle protge par les droits d'auteurs. Copyright 2008 - Jrme Raux. Aucune reproduction, mme partielle, ne peut tre faite de ce site et de l'ensemble de son contenu : textes, documents, images, etc sans l'autorisation expresse de l'auteur. Sinon vous encourez selon la loi jusqu' 3 ans de prison et jusqu' 300 000 E de dommages et intrts. Droits de diffusion permanents accords developpez LLC.
Affichage en ligne avec array() a- AVEC calcul du nombre de lignes

response.write tableau(k) ' ------------------------%> </td> <% k=k+1 else ' cellule vide %> <td> </td> <% end if next %> <tr> <% next %> </tbody> </table> <% else %> pas de donnes afficher <% end if %> </body> </html>
III-B - Affichage "en ligne" avec array() - SANS calcul du nombre de lignes ncessaires
C'est une faon diffrente d'aborder le problme :

Affichage "tant qu'il y a des donnes ..." while ... L'astuce : on utilise la proprit "modulo" (X Mod Y) qui renvoie le reste de la division entire de X par Y 1 Mod 4 = 1 5 Mod 4 = 1 9 Mod 4 = 1 2 Mod 4 = 2 3 Mod 4 = 3 4 Mod 4 = 0 6 Mod 4 = 2 7 Mod 4 = 3 8 Mod 4 = 0 10 Mod 4 = 2 11 Mod 4 = 3 ...
Donc :

Quand le modulo = 1 : premire colonne ; Quand le modulo = 0 : dernire colonne.
Le nombre de lignes (NbrLigne) est incrment au fur et mesure :

on peut (ventuellement) le rcuprer A LA FIN, ou l'intercepter en cours de route (pour PAGINATION)
Affichage en ligne avec array() b- SANS calcul du nombre de lignes

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" dir="ltr"> <head> <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" /> <title>Affichage en ligne avec Array - SANS calcul du Nbreligne</title> </head> <body> <% ' exemple tableau = array("elt0","elt1","elt2","elt3","elt4","elt5") NbrCol = 4 ' -------------------------------------------------------' tableau : le tableau (array) des donnees a afficher ' NbrCol : le nombre de colonnes ' ----------------------' nombre de cellules a remplir NbreData = ubound(tableau)+1 ' ----------------------' affichage NbrLigne = 0 if (NbreData <> 0) then k = 0 ' indice du tableau %> <table border="1"> <tbody> <% while (k < NbreData) j = k+1 if (j Mod NbrCol = 1) then NbrLigne = NbrLigne + 1 fintr = 0 %> <tr> <% end if %> <td> <% ' ------------------------' DONNEES A AFFICHER dans la cellule response.write tableau(k) ' ------------------------%> </td> <% if (j Mod NbrCol = 0) then fintr = 1 %> </tr> <% end if - 16 Les sources prsentes sur cette pages sont libre de droits, et vous pouvez les utiliser votre convenance. Par contre cette page de prsentation de ces sources constitue une oeuvre intellectuelle protge par les droits d'auteurs. Copyright 2008 - Jrme Raux. Aucune reproduction, mme partielle, ne peut tre faite de ce site et de l'ensemble de son contenu : textes, documents, images, etc sans l'autorisation expresse de l'auteur. Sinon vous encourez selon la loi jusqu' 3 ans de prison et jusqu' 300 000 E de dommages et intrts. Droits de diffusion permanents accords developpez LLC.
Affichage en ligne avec array() b- SANS calcul du nombre de lignes

k=k+1 wend ' derniere balise /tr if (fintr<>1) then %> </tr> <% end if %> </tbody> </table> <% else %> pas de donnes afficher <% end if %> </body> </html>
IV - Affichage "en ligne" avec Base de Donnes
Affichage de donnes rcupres par une requte dans une base de donnes

On veut afficher dans chaque cellule les donnes provenant d'un enregistrement ; On veut que le tableau fasse un nombre dtermin de colonnes ; Mais on ne connait pas l'avance le nombre de donnes rcupres : il faut donc pouvoir afficher (automatiquement) autant de lignes que ncessaire.
Dans la partie "' DONNEES A AFFICHER dans la cellule" : vous affichez ce que vous voulez !
Afficher plusieurs donnes, Afficher des images, Ajouter des liens hypertexte, Les organiser selon votre mise en page, dans un tableau, ...
Mme principe que "SANS calcul du nombre de lignes" :

Affichage "tant qu'il y a des donnes ..." while ... ; L'astuce : on utilise la proprit "modulo".
Ex. : La table MATABLE : ID 1 2 3 CHOSE banane betterave oule b GENRE fruit legume jouet 4 5 6 pomme ananas baie fruit fruit fruit 7 bille jouet 8 citron fruit 9 10 bonbon ballon douceurjouet
La requte (exemple) : toutes les "CHOSE" commenant par un "b", classes par ordre alphabtique.
_connexion.asp
<% ' connexion a la BD ' Path long de la base de donnes dbPath = Server.MapPath("DOSSIERBASE/MABASE.mdb") ' Cration de l objet permettant la connexion Set Conn = Server.CreateObject("ADODB.Connection") ' Connexion Conn.Open "DRIVER={Microsoft Access Driver (*.mdb)};" & " DBQ=" & dbPath %>
Affichage en ligne avec Base de Donnees

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" dir="ltr"> <head> <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" /> <title>Affichage en ligne avec Base de Donnees</title> </head> <body> <% ' NbrCol : le nombre de colonnes ' NbrLigne : calcul automatique a la FIN ' -------------------------------------------------------' (exemple) NbrCol = 4 ' La requete (exemple) : ' toutes les "CHOSE" commenant par un "b", classes par ordre alphabtique. latable = "MATABLE"
Affichage en ligne avec Base de Donnees
SQL = "SELECT * FROM " & latable & " WHERE CHOSE LIKE 'b%' ORDER BY DONNEE ASC" Set RS = server.createobject("ADODB.Recordset") RS.Open SQL,Conn , 3, 3 ' -------------------------------------------------------' nombre de cellules a remplir NbreData = RS.recordcount ' -------------------------------------------------------' affichage NbrLigne = 0 if (NbreData <> 0) then j = 1 %> <table border="1"> <tbody> <% while not RS.eof if (j Mod NbrCol = 1) then NbrLigne = NbrLigne + 1 fintr = 0 %> <tr> <% end if %> <td> ' ------------------------' DONNEES A AFFICHER dans la cellule response.write RS.fields("CHOSE") response.write "<br/>" response.write "<i>"&RS.fields("GENRE")&"</i>" ' ------------------------%> </td> <% if (j Mod NbrCol = 0) then %> </tr> <% fintr = 1 end if j=j+1 RS.movenext wend ' derniere balise /tr if (fintr<>1) then %> </tr> <% end if <% </tbody> </table> <% else %> pas de donnes afficher <% end if %> <% ' deconnexion de la base Conn.close : Set Conn=nothing %> </body> </html>
V - Affichage "en colonne" avec array()

Les scripts prcdents affichent les donnes "en ligne".
Affichage des rsultats "en colonne" :

Pour un nombre de lignes (NbreLigne) dfini ; Il faut pouvoir afficher (automatiquement) autant de colonnes que ncessaire.
V-A - Affichage "en Colonne" avec Array() - Solution 1
Principe :

Une table d'une ligne (invisible) ; Dans chaque cellule : cration d'une table d'1 colonne et NbreLigne lignes ; Ajout de cellules supplmentaires "tant qu'on a des donnes..."
Affichage en colonne avec array() - solution 1

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" dir="ltr"> <head> <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" /> <title>Affichage en colonne avec array - solution 1</title> </head> <body> <% ' 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") ' -------------------------------------------------------' nombre de cellules a remplir NbreData = ubound(tableau)+1 ' -------------------------------------------------------NbrCol = 0 ' affichage - 25 Les sources prsentes sur cette pages sont libre de droits, et vous pouvez les utiliser votre convenance. Par contre cette page de prsentation de ces sources constitue une oeuvre intellectuelle protge par les droits d'auteurs. Copyright 2008 - Jrme Raux. Aucune reproduction, mme partielle, ne peut tre faite de ce site et de l'ensemble de son contenu : textes, documents, images, etc sans l'autorisation expresse de l'auteur. Sinon vous encourez selon la loi jusqu' 3 ans de prison et jusqu' 300 000 E de dommages et intrts. Droits de diffusion permanents accords developpez LLC.
if (NbreData <> 0) then k = 0 ' indice du tableau %> <table> <tbody> <tr> <% while (k < NbreData) %> <td valign="top"> <table border="1"> <% for i=1 to NbrLigne step 1 if (k < NbreData) then %> <tr> <td> <% ' ------------------------' DONNEES A AFFICHER dans la cellule response.write tableau(k) ' ------------------------<% </td> </tr> <% k=k+1 end if if (i = NbrLigne) then %> </table> </td> <% end if next NbrCol = NbrCol + 1 wend %> </tr> </tbody> </table> <% else %> pas de donnes afficher <% end if %> </body> </html>
V-B - Affichage "en Colonne" avec Array() - Solution 2

La solution 1 est efficace, mais pas satisfaisante si on souhaite aligner "proprement" toutes les cellules. Cas des cellules dont la hauteur du contenu peut varier (par ex. : avec des images de hauteur variable)
Principe :

Une seule table ; Le remplissage se fait ligne par ligne en testant le "modulo".
Exemple : 10 lments (elt0 elt9) sur 3 lignes. --> On doit les afficher dans cet ordre : ligne 0 : ligne 1 : ligne 2 : elt0 - elt3 - elt6 - elt9 elt1 - elt4 - elt7 elt2 - elt5 - elt8 0 Mod 3 = 3 Mod 3 = 6 Mod 3 = 9 Mod 3 = 0 1 Mod 3 = 4 Mod 3 = 7 Mod 3 = ... = 1 2 Mod 3 = 5 Mod 3 = 8 Mod 3 = ... = 2

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" dir="ltr"> <head> <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" /> <title>Affichage en colonne avec array - solution 2</title> </head> <body> <% ' 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") ' -------------------------------------------------------' nombre de cellules a remplir NbreData = ubound(tableau)+1 ' -------------------------------------------------------' affichage if (NbreData <> 0) then i = 0 - 27 Les sources prsentes sur cette pages sont libre de droits, et vous pouvez les utiliser votre convenance. Par contre cette page de prsentation de ces sources constitue une oeuvre intellectuelle protge par les droits d'auteurs. Copyright 2008 - Jrme Raux. Aucune reproduction, mme partielle, ne peut tre faite de ce site et de l'ensemble de son contenu : textes, documents, images, etc sans l'autorisation expresse de l'auteur. Sinon vous encourez selon la loi jusqu' 3 ans de prison et jusqu' 300 000 E de dommages et intrts. Droits de diffusion permanents accords developpez LLC.
NbrCol = 0 %> <table border="1"> <tbody> <% for i=0 to NbrLigne-1 step 1 %> <tr> <% j = 0 while ((i+(j*NbrLigne)) Mod NbrLigne=i and (i+(j*NbrLigne))<NbreData) %> <td> <% ' ------------------------' DONNEES A AFFICHER dans la cellule k = i+(j*NbrLigne) response.write tableau(k) ' ------------------------%> </td> <% j=j+1 if (NbrCol < j) then NbrCol = j end if wend %> </tr> <% next %> </table> <% else %> pas de donnes afficher <% end if %> </body> </html>
VI - Affichage "en colonne" avec Base de Donnes
Le script utilisant les indices de tableau :

Ex. : La table MATABLE : ID 1 2 3 CHOSE banane betterave oule b GENRE fruit legume jouet
Cration d'un tableau array() contenant les donnes rcupres.
4 5 6 pomme ananas baie fruit fruit fruit
7 bille jouet
8 citron fruit
9 10 bonbon ballon douceurjouet
La requte (exemple) : toutes les "CHOSE" commenant par un "b", classes par ordre alphabtique.
VI-A - Affichage "en Colonne" avec BD - Solution 1

_connexion.asp
<% ' connexion a la BD ' Path long de la base de donnes dbPath = Server.MapPath("DOSSIERBASE/MABASE.mdb") ' Cration de l objet permettant la connexion Set Conn = Server.CreateObject("ADODB.Connection") ' Connexion Conn.Open "DRIVER={Microsoft Access Driver (*.mdb)};" & " DBQ=" & dbPath %>
Affichage en colonne avec Base de Donnees - solution 1

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" dir="ltr"> <head> <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" /> <title>Affichage en colonne avec BD - solution 2</title> </head> <body> <% ' NbrLigne : le nombre de lignes ' NbrCol : calcul automatique - 30 Les sources prsentes sur cette pages sont libre de droits, et vous pouvez les utiliser votre convenance. Par contre cette page de prsentation de ces sources constitue une oeuvre intellectuelle protge par les droits d'auteurs. Copyright 2008 - Jrme Raux. Aucune reproduction, mme partielle, ne peut tre faite de ce site et de l'ensemble de son contenu : textes, documents, images, etc sans l'autorisation expresse de l'auteur. Sinon vous encourez selon la loi jusqu' 3 ans de prison et jusqu' 300 000 E de dommages et intrts. Droits de diffusion permanents accords developpez LLC.
Affichage en colonne avec Base de Donnees - solution 1
' -------------------------------------------------------' (exemple) NbrLigne = 4 ' La requete (exemple) : toutes les "CHOSE" commenant par un "b", classes par ordre alphabtique. latable = "MATABLE" SQL = "SELECT * FROM " & latable & " WHERE CHOSE LIKE 'b%' ORDER BY DONNEE ASC" Set RS = server.createobject("ADODB.Recordset") RS.Open SQL,Conn , 3, 3 ' ----------------------------' nombre de cellules a remplir 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("CHOSE") tableau2(k) = RS.fields("GENRE") k=k+1 RS.movenext wend ' ----------------------------' affichage if (NbreData <> 0) then i=0 NbrCol=0 %> <table border="1"> <tbody> <% for i=0 to NbrLigne-1 step 1 %> <tr>" <% j=0 while ((i+(j*NbrLigne)) Mod NbrLigne=i and (i+(j*NbrLigne))<NbreData) %> <td> <% ' ------------------------' DONNEES A AFFICHER dans la cellule k = i+(j*NbrLigne) response.write tableau1(k) response.write "<br/>" response.write "<i>"&tableau2(k)&"</i>" ' ------------------------%> </td> <% j=j+1 if (NbrCol < j) then NbrCol = j end if wend %> </tr> <% next %> </tbody> </table> <% else %> pas de donnes afficher <% end if %> <% Conn.close : Set Conn=nothing ' deconnexion de la BD %> </body> </html>
VI-C - Affichage "en Colonne" avec BD - Astuce

Au lieu de crer un tableau array() pour chaque donne rcupre (tableau1, tableau2, ...), il est possible de crer un seul tableau array() :
En ASP : il vaut mieux dfinir le nom des champs au moment de crer l'array(). Affichage en colonne avec array() - solution 2
<% ' ... ' -------------------------------------------------------' creation d'UN SEUL ARRAY avec toutes les donnees ' il faut indiquer ici le tableau des champs a recuperer tableau = RS.GetRows(,,array("CHOSE","GENRE")) ' l indice de "CHOSE" sera 0, celui de "GENRE" sera 1 ' -------------------------------------------------------' affichage ' ... ' ------------------------' DONNEES A AFFICHER dans la cellule k = i+(j*NbrLigne) response.write tableau(0,k) response.write "<br/>" response.write "<i>"&tableau(1,k)&"</i>" ' ------------------------' ... %>
VII - Pour aller plus loin : fonctions

Les codes proposs ici sont rdigs en dur dans la page afficher. Mais si vous tes amen faire des tableaux, de manire rptitives, d'aprs des besoins spcifiques : - nombre, type de donnes afficher, - mise en page appliquer l'intrieur de la cellule, ...
il est possible d'crire des fonctions ou procdures externes.

CreateHtmlTable(NbrCol,............) : dfinir les bons paramtres transmettre la fonction, ' ......... : le code dpend du type d'affichage choisi (cf paragraphes prcdents) ...affichage... : dpend des critres (cf ci-dessus)
FONCTIONHtmlTable.asp
<% ' -------------------------------------------------------Public Function HtmlTable(NbrCol,............) %> <table> <tbody> <tr> <% ' ......... %> <td> <% ' ------------------------' DONNEES A AFFICHER dans la cellule response.write ...affichage... ' ------------------------%> </td> <% ' ......... %> </tr> </tbody> </table> <% End Function ' -------------------------------------------------------%>
Et appel de la fonction dans la page : page.asp

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" dir="ltr"> <head> <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" /> <title>page</title> </head> <body> <% ' -----------------------------' criteres et donnees a afficher NbrCol = ..... monarray = array(.....) ' ------------------------' tableau html HtmlTable(NbrCol,............) ' -----------------------------%> </body> </html>
VIII - Pagination
Quand la liste est longue, il est souvent prfrable de l'afficher sur plusieurs page. C'est le principe de la "pagination". On trouve de nombreux codes en cherchant un peu sur le web. Voici un "bout de code" DVP par Immobilis : Pagination Un tuto (hors DVP, mais trs bien expliqu) : Pagination Dcouper un listing en plusieurs pages
IX - Conclusion
Il ne vous reste plus qu' choisir le mode d'affichage qui vous convient ! Toutes remarques, corrections, ajouts, permettant d'amliorer ou d'toffer ce tutoriel seront les bienvenus.

Jreaux ASP Affichage Donnees Tableau HTML

Transféré par

Informations du document

Copyright

Formats disponibles

Partager ce document

Partager ou intégrer le document

Options de partage

Avez-vous trouvé ce document utile ?

Ce contenu est-il inapproprié ?

Droits d'auteur :

Formats disponibles

Jreaux ASP Affichage Donnees Tableau HTML

Transféré par

Droits d'auteur :

Formats disponibles

Affichage de donnes dans un tableau HTML

(provenant d'un array ou d'une Base de Donnes)

par Jrme Raux (Pages de jreaux62)

On a souvent besoin, ou envie, d'afficher ses donnes "proprement" :

On peut aussi avoir besoin d'un affichage :

II - Tables simples II-A - Structure d'un tableau HTML (table)

II-B - Tableau HTML simple de NbrCol colonnes par NbrLigne lignes

Tableau html simple

Tableau html simple

II-C - Table de multiplication : exemple amlior

III - Affichage "en ligne" avec array()

Affichage d'un certains nombres de donnes dans un tableau :

Rcupration des lments d'un tableau Array() :

Affichage en ligne avec array() a- AVEC calcul du nombre de lignes

Affichage en ligne avec array() a- AVEC calcul du nombre de lignes

C'est une faon diffrente d'aborder le problme :

Quand le modulo = 1 : premire colonne ; Quand le modulo = 0 : dernire colonne.

Le nombre de lignes (NbrLigne) est incrment au fur et mesure :

Affichage en ligne avec array() b- SANS calcul du nombre de lignes

Affichage en ligne avec array() b- SANS calcul du nombre de lignes

IV - Affichage "en ligne" avec Base de Donnes

Mme principe que "SANS calcul du nombre de lignes" :

Affichage en ligne avec Base de Donnees

Affichage en ligne avec Base de Donnees

V - Affichage "en colonne" avec array()

Affichage des rsultats "en colonne" :

V-A - Affichage "en Colonne" avec Array() - Solution 1

Affichage en colonne avec array() - solution 1

Affichage en colonne avec array() - solution 1

V-B - Affichage "en Colonne" avec Array() - Solution 2

Affichage en colonne avec array() - solution 2

Affichage en colonne avec array() - solution 2

VI - Affichage "en colonne" avec Base de Donnes

Le script utilisant les indices de tableau :

Cration d'un tableau array() contenant les donnes rcupres.

4 5 6 pomme ananas baie fruit fruit fruit

9 10 bonbon ballon douceurjouet

VI-A - Affichage "en Colonne" avec BD - Solution 1

Affichage en colonne avec Base de Donnees - solution 1

Affichage en colonne avec Base de Donnees - solution 1

VI-C - Affichage "en Colonne" avec BD - Astuce

VII - Pour aller plus loin : fonctions

il est possible d'crire des fonctions ou procdures externes.

Et appel de la fonction dans la page : page.asp

Vous aimerez peut-être aussi