I. Avant-Propos

On a souvent besoin, ou envie, d'afficher ses données "proprement" :
  • Données provenant d'un array() ;
  • Ou d'une base de données.

La création "à la volée" d'un tableau html (table) est une bonne solution.

On peut aussi avoir besoin d'un affichage :
  • -> "En ligne" (les données sont affichées horizontalement ligne après ligne),
  • -> Ou "en colonne" (affichage vertical colonne après colonne).

Ce tutorial traite ces différents cas.

Avec les écrans 16/9e (portable, ...), il devient intéressant 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 débutant Tutoriels ASP par Florian
Tables HTML Les tableaux (XHTML et CSS)
Array() FAQ tableaux array()
Bases de données Utiliser une base de données
PAGINATION Pagination bout de code par Immobilis
Pagination tuto (hors DVP, mais très 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 données à afficher dépendent de VOS besoins :
- plusieurs données peuvent être affichées (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 début et fin d'une table html
<tr> </tr> (table row) rangée, ou ligne.
<th> </th> (table head) cellules d'en-tête
(cellules servant de titre aux colonnes)
autant de fois qu'il y a de colonnes
<td> </td> (table data) cellules de données
(afficher du texte, des images, une table...)
autant de fois qu'il y a de colonnes
Autres balises Se référer au cours : Les tableaux (XHTML et CSS)

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

Image non disponible
Tableau html simple
Sélectionnez

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr">
<head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <title>Affichage Array en ligne - avec calcul du Nbreligne</title>
</head>
<body>

<table>
<tbody>
<%
' 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 amélioré

Image non disponible
Table de multiplication
Sélectionnez

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr">
<head>
	 <meta http-equiv="content-type" content="text/html; charset=utf-8" />
	 <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)
' le tableau final fera donc 10 x 10
' --------------------------------------------------------
	' 1ere ligne (ligne 0)
%>
	<thead>
		<tr>
			<th style="background:#CCCCCC;">i X j</th>
<%	for j=1 to NbrCol step 1
%>			<th style="background:"#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 style="background:#FFFF66;"><% response.write j %></td>
<%			end if
			' colonnes suivantes
			if (i=j) then
%>			<td style="background:#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 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() :
  • Le premier indice d'un array() est 0 (zéro)
  • le dernier indice est : ubound(tableau)

III-A. Affichage "en ligne" avec array() - AVEC calcul du nombre de lignes nécessaires

Première méthode :
  • On détermine le nombre de données à afficher : ubound(tableau)+1,
  • et on en déduit le nombre de cellules nécessaire.
  • les cellules vides sont remplies avec un espace &nbsp;.
Image non disponible
Affichage en ligne avec array() a- AVEC calcul du nombre de lignes
Sélectionnez

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr">
<head>
	 <meta http-equiv="content-type" content="text/html; charset=utf-8" />
	 <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
			response.write tableau(k)
			' -------------------------
%>			</td>
<%			k=k+1
		else ' cellule vide
%>			<td>&nbsp;</td>
<%		end if
		next
%>		<tr>
<%	next
%>
	</tbody>
	</table>
<%
else
%>
	pas de données à afficher
<%
end if
%>

</body>
</html>

III-B. Affichage "en ligne" avec array() - SANS calcul du nombre de lignes nécessaires

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" (X Mod Y) qui renvoie le reste de la division entière de X par Y
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 10 Mod 4 = 2 11 Mod 4 = 3 ...
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 peut (éventuellement) le récupèrer A LA FIN,
  • ou l'intercepter en cours de route (pour PAGINATION)
Image non disponible
Affichage en ligne avec array() b- SANS calcul du nombre de lignes
Sélectionnez

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr">
<head>
	 <meta http-equiv="content-type" content="text/html; charset=utf-8" />
	 <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
		k=k+1
	wend
	' derniere balise /tr
	if (fintr<>1) then
%>		</tr>
<%	end if
%>
	</tbody>
	</table>
<%
else
%>
	pas de données à afficher
<%
end if
%>

</body>
</html>

IV. 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 cellule 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 "' DONNEES A AFFICHER dans la cellule" : vous affichez ce que vous voulez !
  • Afficher plusieurs données,
  • Afficher des images,
  • Ajouter des liens hypertexte,
  • Les organiser selon votre mise en page, dans un tableau,
  • ...
Même principe que "SANS calcul du nombre de lignes" :
  • Affichage "tant qu'il y a des données ..." while ... ;
  • L'astuce : on utilise la propriété "modulo".

Ex. : La table MATABLE :

ID 1 2 3 4 5 6 7 8 9 10
CHOSE banane betterave boule pomme ananas baie bille citron bonbon ballon
GENRE fruit legume jouet fruit fruit fruit jouet fruit douceur jouet

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

Image non disponible
_connexion.asp
Sélectionnez

<% ' connexion a la BD
' Path long de la base de données
dbPath = Server.MapPath("DOSSIERBASE/MABASE.mdb")
' Création 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
Sélectionnez

<!-- #include file="_connexion.asp"-->
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr">
<head>
	 <meta http-equiv="content-type" content="text/html; charset=utf-8" />
	 <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" commençant par un "b", classées par ordre alphabétique.
SQL = "SELECT * FROM MATABLE 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 données à afficher
<%
end if
%>

<% ' deconnexion de la base
Conn.close : Set Conn=nothing
%>

</body>
</html>

V. Affichage "en colonne" avec array()

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.

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

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..."
Image non disponible
Affichage en colonne avec array() - solution 1
Sélectionnez

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr">
<head>
	 <meta http-equiv="content-type" content="text/html; charset=utf-8" />
	 <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
if (NbreData <> 0) then
k = 0 ' indice du tableau
%>
	<table border="0">
	<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 données à 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 éléments (elt0 à elt9) sur 3 lignes.
--> On doit les afficher dans cet ordre :

ligne 0 : elt0 - elt3 - elt6 - elt9 0 Mod 3 = 3 Mod 3 = 6 Mod 3 = 9 Mod 3 = 0
ligne 1 : elt1 - elt4 - elt7 1 Mod 3 = 4 Mod 3 = 7 Mod 3 = ... = 1
ligne 2 : elt2 - elt5 - elt8 2 Mod 3 = 5 Mod 3 = 8 Mod 3 = ... = 2
Image non disponible
Affichage en colonne avec array() - solution 2
Sélectionnez

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr">
<head>
	 <meta http-equiv="content-type" content="text/html; charset=utf-8" />
	 <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
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
			' nombre de colonnes
			if (NbrCol < j) then NbrCol = j end if
		wend
		' ajout cellule vide (derniere colonne)
		if (j <> NbrCol) then 
%>			<td>&nbsp;</td>
<%
		end if
%>		</tr>
<%	next
%>
	</table>
<%
else
%>
	pas de données à afficher
<%
end if
%>

</body>
</html>

VI. Affichage "en colonne" 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.

Ex. : La table MATABLE :

ID 1 2 3 4 5 6 7 8 9 10
CHOSE banane betterave boule pomme ananas baie bille citron bonbon ballon
GENRE fruit legume jouet fruit fruit fruit jouet fruit douceur jouet

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

Image non disponible

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

_connexion.asp
Sélectionnez

<% ' connexion a la BD
' Path long de la base de données
dbPath = Server.MapPath("DOSSIERBASE/MABASE.mdb")
' Création 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
Sélectionnez

<!-- #include file="_connexion.asp"-->
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr">
<head>
	 <meta http-equiv="content-type" content="text/html; charset=utf-8" />
	 <title>Affichage en colonne avec BD - solution 2</title>
</head>
<body>

<%
' NbrLigne : le nombre de lignes
' NbrCol : calcul automatique
' --------------------------------------------------------
' (exemple)
NbrLigne = 4
' La requete (exemple) : toutes les "CHOSE" commençant par un "b", classées par ordre alphabétique.
SQL = "SELECT * FROM MATABLE 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
		' ajout cellule vide (derniere colonne)
		if (j <> NbrCol) then 
%>			<td>&nbsp;</td>
<%
		end if
%>		</tr>
<%	next
%>
	</tbody>
	</table>
<%
else
%>
	pas de données à 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 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 ASP : il vaut mieux définir le nom des champs au moment de créer l'array().

Affichage en colonne avec array() - solution 2
Sélectionnez

<%
' ...
' --------------------------------------------------------
' 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 proposés ici sont rédigés en dur dans la page à afficher.

Mais si vous êtes amené à faire des tableaux, de manière répétitives, d'après des besoins spécifiques :
- nombre, type de données à afficher,
- mise en page à appliquer à l'intérieur de la cellule, ...

il est possible d'écrire des fonctions ou procédures externes.
  • CreateHtmlTable(NbrCol,............) : définir les bons paramètres à transmettre à la fonction,
  • ' ......... : le code dépend du type d'affichage choisi (cf paragraphes précédents)
  • ...affichage... : dépend des critères (cf ci-dessus)
FONCTIONHtmlTable.asp
Sélectionnez

<%
' --------------------------------------------------------
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
Sélectionnez

<!-- #include file="FONCTIONHtmlTable.asp"-->
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr">
<head>
	 <meta http-equiv="content-type" content="text/html; charset=utf-8" />
	 <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 préférable 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 très bien expliqué) : Pagination Découper 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'améliorer ou d'étoffer ce tutoriel seront les bienvenus.

25 commentaires Donner une note à l'article (0)