défilement horizontal d'un tableau

Version imprimable

13/01/2010, 19h13
lodan

défilement horizontal d'un tableau

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
14/01/2010, 07h42
vermine

Paginer vs Défiler

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.
14/01/2010, 08h54
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
14/01/2010, 10h40
kernelfailure

Bonjour,

Ce sujet a été abordé il y a quelques mois, pour les deux solutions : défilement au pixel ou à la colonne.
14/01/2010, 11h23
bigboomshakala

sans défilement en masquant les colonnes qui ne doivent pas être affichées
:arrow: 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)

Citation:

Envoyé par bigboomshakala

sans défilement en masquant les colonnes qui ne doivent pas être affichées
:arrow: 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:

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:

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.