Discussion :

[lodan]

Bonsoir,

Je cherche à faire une présentation d'un tableau sur mon formulaire sous forme de colonne.

Mon tableau fait n colonnes. La 1ère contient les intitulés de chaque ligne de tableau, la dernière contient le total de chaque ligne.

Les colonnes intermédiaires contiennent le détail.

J'affiche très bien mon tableau en html, mais je voudrai figer le nombre de colonne de detail à 4 et paginer horizontalement pour voir les colonnes suivantes ou précédentes.

C'est faisable j'en suis convaincu. J'ai regardé du côté de jquery sans succès.

Avez-vous une piste ?

Merci d'avance

[vermine]

Bonjour,

Vous désirez une pagination ou bien un défilement. Je m'explique, la pagination, pour moi, c'est afficher 4 par 4 vos colonnes. Si vous appuyer sur le bouton "colonnes suivantes", les 4 qui sont alors affichées disparaissent et sont remplacées par 4 nouvelles. Ou bien une par une, tant qu'il n'y en a que 4 d'affichées.
Si par contre vous prenez le défilement, ce sera une barre en bas du tableau pour faire apparaitre au fur et à mesure la colonne suivante, avec la première colonne qui disparait à la même vitesse.

[lodan]

Bonjour Vermine,

Très bonne question.

Quel est le plus souple pour l'utilisateur ?

Un scroll ou 2 boutons précédent/suivant.

Personnellement je crois que je préfère les 2 boutons et un décalage 4 par 4

[kernelfailure]

Bonjour,

Ce sujet a été abordé il y a quelques mois, pour les deux solutions : défilement au pixel ou à la colonne.

[bigboomshakala]

sans défilement en masquant les colonnes qui ne doivent pas être affichées
display:none sur toutes les colonnes, sauf les 4 à afficher (display:block)
les boutons servent à passer aux 4 suivantes ou précédentes (boucler sur les colonnes pour modifier le style de façon adéquate)

[lodan]

sans défilement en masquant les colonnes qui ne doivent pas être affichées
display:none sur toutes les colonnes, sauf les 4 à afficher (display:block)
les boutons servent à passer aux 4 suivantes ou précédentes (boucler sur les colonnes pour modifier le style de façon adéquate)

Mais oui, mais c'est bien sur.

C'est simple à mettre en oeuvre.

Merci beaucoup.

Voici ce que j'ai fait :

Mon html :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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
 
<h4>12 catégories disponibles sur 4 pages</h4>
<input style="margin: 0px" type="button" name="PagePrecedente" id = "PagePrecedente" onclick= "cacherPage('page', document.getElementById('numpage').value); afficherPage('page', document.getElementById('numpage').value, 'precedente');" value="Page Précédente" class="button">
page:	<input type="input" name="numpage" value="1" id = "numpage" readonly = "readonly" size = 1 style="text-align:right">/4	
<input style="margin: 0px" type="button" name="PageSuivante"
onclick="cacherPage('page', document.getElementById('numpage').value); afficherPage('page', document.getElementById('numpage').value, 'suivante');" value="Page Suivante" class="button">
 
<table width="100%">
<tr id="page0" style="display:block; vertical-align:top;">
<td>
	<table width="160px">
		<tr style = 'height:50px;'>
			<td>
			</td>
		</tr>
	</table>
</tr>
<tr id="page1" style="display:none; vertical-align:top;">
.....
</tr>
<tr id="page2" style="display:none; vertical-align:top;">
.....
</tr>
<tr id="page3" style="display:none; vertical-align:top;">
.....
</tr>

Mon javascript :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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
function cacherPage(id, numpage)
{
page = Math.abs(numpage - 1);
var identifiant = id+page;	document.getElementById(identifiant).setAttribute("style","display:none; vertical-align:top;");
}
function afficherPage(id, numpage, sens)
{
var page = parseFloat(numpage);
if(sens === "suivante")
{numpage = Math.abs(page + 1);
}
if(sens === "precedente")
{
if(numpage == 1)
{
page = 0;
numpage = 1;
}
else
{
numpage = Math.abs(page - 1);
page = Math.abs(page - 2);
}
}
if(numpage > 4)
{
page = Math.abs(4 - 1);
numpage = 4;
}
var identifiant = id+page;								document.getElementById(identifiant).setAttribute("style","display:block; vertical-align:top;");
if(sens = "suivante") document.getElementById("numpage").value = numpage;
}

Bien sûr dans mon script PHP je calcul mon nombre de page en fonction du nombre de catégories à afficher, sachant que j'affiche 3 catégories à la fois dans des tableaux me permettant de faire des colonnes.