Discussion :

[coniston]

Bonjour.

1) J'ai un tableau dans une page.
2) Chaque case contient un lien incluant une variable dans l'URL ( ?id=1, ?id=2, ?id=3 ... etc.) et en cliquent dessus permet d'ouvrir un deuxième petit tableau sous ce même lien.
3) Je fais défiler le tableau d'exemple (voir pièce jointe) jusqu'à sa moitie.
5) Si je fais un refresh la page réapparaît dans exactement la même position et rien ne bouge. Parfait.
6) Si par contre je clique sur un le lien 15 la page se rouvre avec le lien 1 tout en haut de la page, et en défilant vers le bas je retrouverai sous le lien 15 son petit tableau ouvert.

Jusqu’à là tout est évident et normal. Ma question est la suivante.

J'aimerais que en cliquant sur n'importe quel lien ( lien 15 par exemple), après rappel de la page, je revienne exactement dans la même position qu'au moment de l'appel. Et cela avec le lien cliqué ( lien 15) précisément dans la mème position (au mm près) mais avec le nouveau petit tableau ouvert en dessous (même si totalement visible ou non).

La solution des "anchor" ne donne pas ce que je souhaite car si je la place dans la même cellule du lien, la cellule du lien se retrouvera en haut de la page suite à son appel et non forcément à l'endroit ou elle se trouvait initialement.

En pièce jointe un fichier de test.

Merci

[Geoffrey74]

Salut,

Une solution serai de passer par l'ajax pour récupérer le tableau à afficher. Comme ça, aucun chargement de page et aucune perte de position.

[coniston]

Merci de ta réponse.
Ce serait TOP en effet, mais je suis NUL en javascript. Je suis a même d'adapter un du JS quand j'ai du code de départ mais pas de le créer. Aurais tu éventuellement pour ce genre de de nécessité un bout de code js sur lequel je pourrai travailler?

J'aimerais que sur la base de ceci en cliquant sur le lien

<table width="200" border="0" cellspacing="0" cellpadding="0">
<tr>
<td><a href="#">Cliquer ici pour ouvrir petit tableau en dessous</a></td>
</tr>
</table>

que j'obtienne ceci en résultat

<table width="200" border="0" cellspacing="0" cellpadding="0">
<tr>
<td><a href="#">Cliquer ici pour ouvrir petit tableau en dessous</a>

<table border="0" align="center" cellpadding="0" cellspacing="0" bgcolor="#CCCCCC">
<tr>
<td>Mon petit tableau</td>
</tr>
</table>
</td>
</tr>
</table>

[Geoffrey74]

Tu pourrais faire un truc du genre :

Code html :

Code :

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

1
2
3
4
5
<table width="200" border="0" cellspacing="0" cellpadding="0">
<tr>
<td><button id="TON_ID" class="btn-submit">Cliquer ici pour ouvrir petit tableau en dessous</button>
 
<div id="hidden_TON_ID"></div>

Code Javascript :

Code :

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

1
2
3
4
5
6
7
8
9
 
$(".btn-submit").click(function() {
$.ajax({
  url: "obtenir-mon-tableau.php?id="+$(this).id,
  context: document.body
}).done(function(data) {
  $("#hidden_"+$(this).id ).html(data);
});
});

Code PHP de la page 'obtenir-mon-tableau.php'

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
 
// Après avoir vérifier que $_GET['id'] soit bien un entier
// Tu effectue ta requête pour récupéré le contenu du tableau
// Tu génère ton tableau dans une variable
$Retour = '<table border="0" align="center" cellpadding="0" cellspacing="0" bgcolor="#CCCCCC">
<tr>
<td>Mon petit tableau</td>
</tr>
</table>
</td>
</tr>
</table> ';
// Tu affichage la variable qui sera transmise au JS
echo $Retour;

Ce code nécessite Jquery.