Afficher / masquer les colonnes d'un tableau sans rechargement
Soyez le premier à donner votre avis sur cette source.
Vue 28 386 fois - Téléchargée 1 056 fois
Description
Salut !
Ce code permet d'afficher le contenu d'une base de données dans un tableau. Les colonnes de ce tableau sont modifiables (masquer / afficher) grâce à des cases à cocher (sans avoir à recharger la page donc en JavaScript).
Il est aussi possible de classer les données en cliquant sur l'intitulé de la colonne (dans ce cas, la page sera rechargée, mais la liste des champs affichés ne changera pas)
Pour le tester, vous aurez besoin d'une base de données "liste" contenant les champs "IDClient", "nom", "prenom", "email", "adresse", "tel", "fax".
Il vous suffit ensuite de copier / coller tout le code dans un fichier "index.asp", de modifier les paramètres en début de page (voir plus loin si besoin)... et de revoir la mise en page qui est des plus... basiques ;) , et le tour est joué !
J'ai essayé de simplifier un maximum le code pour le rendre au mieux compréhensible et lisible (pas de gestion de pages par exemple), tout en essayant de garder un maximum de fonctionnalitées, mais il reste quelque peu compliqué... Donc si vous avez des questions, des coneils, ou n'importe quoi, n'hésitez pas, vous avez mon e-mail !
Si vous avez des questions, n'hésitez pas à m'envoyer un mail !
Ce code permet d'afficher le contenu d'une base de données dans un tableau. Les colonnes de ce tableau sont modifiables (masquer / afficher) grâce à des cases à cocher (sans avoir à recharger la page donc en JavaScript).
Il est aussi possible de classer les données en cliquant sur l'intitulé de la colonne (dans ce cas, la page sera rechargée, mais la liste des champs affichés ne changera pas)
Pour le tester, vous aurez besoin d'une base de données "liste" contenant les champs "IDClient", "nom", "prenom", "email", "adresse", "tel", "fax".
Il vous suffit ensuite de copier / coller tout le code dans un fichier "index.asp", de modifier les paramètres en début de page (voir plus loin si besoin)... et de revoir la mise en page qui est des plus... basiques ;) , et le tour est joué !
J'ai essayé de simplifier un maximum le code pour le rendre au mieux compréhensible et lisible (pas de gestion de pages par exemple), tout en essayant de garder un maximum de fonctionnalitées, mais il reste quelque peu compliqué... Donc si vous avez des questions, des coneils, ou n'importe quoi, n'hésitez pas, vous avez mon e-mail !
Source / Exemple :
<%
' Script créé par matthieu
' matthieu.dev@laposte.net
' *******************************************************************************
' Cette page possède 2 formulaires : Un qui contient la liste de tout les champs
' à afficher ou masquer (il ne sera pas envoyé)
' et un autre qui contient toutes les infos qui devront être transmisent à la page suivante
' Il se trouve en fin de page
' 2 formulaires car le premier peut être affiché ou masqué
' Tout les champs "colonnes" existent dans les 2 formulaires et sont mis à jours en JavaScript
' *******************************************************************************
' Pour utiliser ce code, il vous suffit de créer donc une table liste contenant les champs :
' "IDClient", "nom", "prenom", "email", "adresse", "tel", "fax".
' et de modifier le chemin d'accès à la base
' Et le tour est joué
' ----------------------------------------------------------------------------------
' Connexion à la base de donnée
' et Creation du curseur -
' ----------------------------------------------------------------------------------
Set Conn = Server.CreateObject("ADODB.Connection")
ConnString="DRIVER={Microsoft Access Driver (*.mdb)}; " & "DBQ=" & Server.MapPath("liste.mdb")
Conn.Open ConnString
Set rs = Server.CreateObject ("ADODB.recordset")
Couleurligne1 = "#C4CBFB" 'Couleur des lignes paires du tableau
Couleurligne2 = "#A0ACFA" 'Couleur des lignes impaires du tableau
' *******************************************************************************
' listChamp est un tableau qui contient pour chaque colonnes à afficher :
' listCols(i)(0)
' => Le nom du champ tel qu'il sera écrit (titre des colonnes,
' listCols(i)(1)
' => Le nom de la colonne dans la BDD (ne doit pas contenir de caractères spéciaux ou des espaces)
' listCols(i)(2)
' => affichage lors de la 1ere arrivée sur la page (0 : masqué par défault et 1 : affiché)
' Ici, 5 colonnes en tout, et 3 affichées par défault (si on ne modifie pas la valeur)
' listCols(i)(3)
' => Informations diverses : possibilité de faire d'ajouter des options suivant le type de chanp
' Par exemple, ici, si = 1 => lien vers l'email s'il existe
' *******************************************************************************
listCols =Array( _
Array("Nom abonné", "Nom", "1","0"), _
Array("Prénom abonné", "prenom", "1","0"), _
Array("Email", "email", "1","1"), _
Array("Adresse", "adresse", "1","0"), _
Array("Téléphone", "tel", "0","0"), _
Array("Numéro du Fax", "fax", "0","0"))
' Si le formulaire a déjà été chargé (par exemple si on modifie le classement des champs)
' Il faut récupérer les colonnes à afficher / masquer
If Request.Form("compteur") <> "" Then
For i=0 To UBound(listCols,1)
listCols(i)(2) = Request.Form("a" & listCols(i)(1))
Next
End If
%>
<html>
<head>
<title>Document sans nom</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<%
' Ces styles permettent d'afficher ou de masquer la liste des colonnes avec les cases à cocher
%>
<STYLE Type=Text/css>
FORM.expansion {
COLOR: black
}
FORM.contraction {
DISPLAY: none
}
</STYLE>
<script language="JavaScript">
// Fonction qui permet d'envoyer le formulaire du bas de page
// Et de modifier le classement des champs
function sendForm(classe, sens)
{
if (classe != "") document.formEnvoi.rec_classe.value = classe
if (sens != "") document.formEnvoi.rec_sens.value = sens
document.formEnvoi.submit()
}
// Fonction qui permet d'afficher la liste des colonnes avec les cases à cocher
function affiche_liste_col()
{
enfant = document.getElementById("affCol")
if (enfant.className=="contraction")
{
enfant.className="expansion" // On affiche
}
else
{
enfant.className = "contraction" // On masque
}
}
//Fonction qui permet d'afficher ou masquer les colonnes du tableau
function modCol(whose)
{
coche = document.modcol.elements["a" + whose].checked // La case est cochée ou pas ?
if (coche == true) // Si la case est cochée => on devra afficher la colonne
{
document.formEnvoi.elements["a" + whose].value = "1" // Mémorise l'élément dans le formulaire principal
affiche = "block"
}
else // Sinon, on devra masquer la colonne
{
document.formEnvoi.elements["a" + whose].value = "0" // Mémorise l'élément dans le formulaire principal
affiche = "none"
}
for (i=0;i<(document.formEnvoi.compteur.value);i++) // Pour toutes les lignes du tableau
// Car compteur contient le nombre de lignes
{
document.getElementById(whose + i).style.display = affiche // On masque ou on affiche la cellule
}
}
</script>
</head>
<body>
<a href="#" onclick="affiche_liste_col()">Modifier les colonnes</a>
<%
' ****************************************
' Ici, on affiche la liste de toutes les colonnes avec une case à cocher pour chacune d'elle
' Attention, si vous avez des champs à afficher, ne les mettez pas dans ce formulaire
' il sera caché et pas envoyé
' ****************************************
%>
<form name="modcol" id="affCol" method="post" action="" Class='contraction'>
<table width="500" border="0" cellspacing="0" cellpadding="0"><%
'Pour tout les champs
For i=0 To UBound(listCols,1)
'Si une nouvelle colonne
If colonne = 0 then%>
<tr><%
End if%>
<td width="20"><Input Type="checkbox" name="a<%=listCols(i)(1)%>" value="1"<%
If listCols(i)(2) = "1" Then Response.Write " CHECKED"
%> onClick="modCol('<%=listCols(i)(1)%>')"></td>
<td width="120"><%=listCols(i)(0)%></td>
<td width="13"> </td><%
colonne = colonne + 1
If colonne = 3 Then
colonne = 0%>
</tr><%
End If
Next
%>
</table>
</form>
<table width="500" border="0" align="center" cellpadding="0" cellspacing="1">
<tr align="center" valign="middle">
<%
' La première ligne contient le nom des colonnes
' Ce nom est cliquable pour pouvoir procéder à des tris sur les colonnes
' Dans ce cas, le 2eme formulaire sera envoyé en javascript pour mettre à jour les données
' (La page sera donc rechargée)
' Permet aussi de classer en sens inverse si on reclique sur le nom de la colonne
classe = Request.Form("rec_classe")
sens = Request.Form("rec_sens")
If sens = "" Then sens = 1
For i=0 To UBound(listCols,1)%>
<td width="19" ID="<%=listCols(i)(1)%>0"<%
If listCols(i)(2) = "0" Then Response.Write " style='DISPLAY:none'"%>>
<a href="#" onclick="sendForm('<%=listCols(i)(1)%>', '<%
If classe = listCols(i)(1) Then
Response.Write -sens
Else
Response.Write sens
End if%>')"><%=listCols(i)(0)%></a></td>
<%next
' Vous pouvez ensuite rajouter la liste des colonnes que vous souhaitez
' Comme une colonne pour supprimer, une colonne pour modifier, où d'autres infos
' Ici j'affiche simplement l'ID du client avec un tri dessus
%>
<td><a href="#" onclick="sendForm('IDClient', '<%
If classe = "IDClient" Then
Response.Write -sens
Else
Response.Write sens
End if%>')">IDClient</a></td>
</tr>
<%
' La première ligne est affichée
' On passe maintenant à l'affichage des autres lignes et à la récupération des données
'La table liste doit contenir tout les champs qui sont dans la fonction
' + un champ idClient dans mon exemple
'On récupère ce par quoi on veut trier
strsql = "SELECT * FROM liste"
If classe <> "" Then
strsql = strsql & " ORDER BY " & classe
If sens = 1 Then strsql = strsql & " DESC"
If sens = -1 Then strsql = strsql & " ASC"
End If
rs.Open strsql, Conn,1,2,1
' Compteur sers à mémoriser le nombre de lignes
' Utile surtout si on veut gérer un syteme de page
' Si on affiche tout les éléments sur la même page
' On peut récupérer la valeur par compteur = rs.recordCount
compteur = 0
color = 1
Do While Not rs.eof ' Pour tout les éléments => nouvelle ligne
compteur = compteur +1
'Modification de la couleur pour chaques ligne
If color = 1 Then
b_color = Couleurligne1
Else
b_color = Couleurligne2
End If
color = - color
%>
<tr align="center" valign="middle" bgcolor="<%=b_color%>">
<%
'Pour tout les champs à afficher / masquer
For i=0 To UBound(listCols,1)
%>
<td ID="<%=listCols(i)(1) & compteur%>"<%
' S'il faut masquer le champ
If listCols(i)(2) = "0" Then Response.Write " style='DISPLAY:none'"
%>><%
'Si c'est un champ email
if listCols(i)(3) = "1" AND rs(listCols(i)(1)) <> "" then
response.write "<a href='mailto:" & rs(listCols(i)(1)) & "'>" & rs(listCols(i)(1)) & "</a>"
else
response.write rs(listCols(i)(1))
end if%></td>
<%next
'Et il faut ensuite rajouter toutes les colonnes que vous avez ajouter sur la première ligne
%>
<td><%=rs("idClient")%></td>
</tr>
<%rs.MoveNext
Loop
%>
</table>
<%
' Et le formulaire qui sera envoyé
%><form action="index.asp" method="post" name="formEnvoi">
<Input Type="hidden" name="compteur" value="<%=compteur + 1%>">
<Input Type="hidden" name="rec_classe" value="<%=classe%>">
<Input Type="hidden" name="rec_sens" value="<%=sens%>">
<%
' On affiche les champs qui gèrent l'affichage des colonnes
For i=0 To UBound(listCols,1)%>
<Input Type="hidden" name="a<%=listCols(i)(1)%>" value="<%=listCols(i)(2)%>">
<%next%>
</form>
</body>
</html>
<%
'Sans oublier de fermer la connection à la fin
rs.close
Set rs = Nothing
Conn.close
Set Conn = nothing%>
Conclusion :
Si vous avez des questions, n'hésitez pas à m'envoyer un mail !
Codes Sources
A voir également
- Table de rechargement
- Table rechargement - Meilleures réponses
- Afficher/masquer plusieurs colonnes d'un tableau ✓ - Forum - Javascript / DHTML
- Aficher / Masquer un colonne dans un tableau ✓ - Forum - Javascript / DHTML
- Rafraichir un tableau sans recharger la page ✓ - Forum - PHP
- Définir un nombre de colonnes pour un tableau affichant des données d'une requêt ✓ - Forum - PHP
- Php afficher resultat requete sous forme de tableau - Forum - PHP
Commentaires
Où dois-je mettre mettre les functions,java et HTML
Voici les fichiers de base que j'ai Pouvez-vous me montrer comment faire(point de vu code)
et où les placé dans ces fichiers)
Model(incomplet.php) La Vue(View.html.php dans le dossier tmpl Defaul.php) Controller(incomplete.php)
Les tables que j'ai
supposant que j'ai 2 tables jos_emundus_declaration(id, time_date, user, city)
et une autre table jos_emundus_users(id,user_id,registerDate,firstname,lastname)
et qu'elle sont liées à la table jos_user(id name username email password ) par l'id
CE QUE JE VEUX c'est que sur une page,je puisse lors de la sélection d'un item dans une liste déroulante ex: si dans la liste je choisi city et jappui sur un boutton add_colonne
1)
sa me cré à l'écran à la suite d'un tablo où javais déjà affiché le firstname et le lastename
d'un user.Donc qu'il puisse avoir une colonne city qui se cré juste après la colonne lastename avc à l'intérieure les mêmes données de ville qu'il y'avaient dans city de la table jos_emundus_declaration.
2)
Que je puisse aussi la supprimer en cliquant sur le bouton del_colonne
3)Enfin,
J'aimerai aussi que sur le côté gauche de lécran je puisse avoir les colonnes à ajouter et quand je clic sur une et que je clic sur ajouter sa ajoute une colonne ou del sa la supprime
J'ai testé ton exemple; Là je dis bravo. 5 minutes avant j'avais posé une question dans ce sens En fait je voulais qu'un user puisse afficher x colonnes d 'une base et ce à partir des checkboxes selectionnées parce que mon tableau contient plus d'une vingtaine de colonnes.Je vais prendre en exemple ton zip et je vais essayer de le modifier afin d'obtenir l'effet inverse c'est à dire en fonction des cases cochées les colonnes apparaitrons. Toute mes félicitations et encore une fois merci.
Bonne continuation
Avec en plus, la gestion de liens sur les emails !
@+
Matthieu
jvai tester
un ZIP ca serait cool
merci
Vous n'êtes pas encore membre ?
inscrivez-vous, c'est gratuit et ça prend moins d'une minute !
Les membres obtiennent plus de réponses que les utilisateurs anonymes.
Le fait d'être membre vous permet d'avoir un suivi détaillé de vos demandes et codes sources.
Le fait d'être membre vous permet d'avoir des options supplémentaires.