Discussion :

[kizery]

Bonjour à tous,

J'utilise le plugin suivant pour ajouter une pagination sur mon site (html/css/php) :

https://esimakin.github.io/twbs-pagination/#page-4

Cependant j'ai un souci, quand on est sur la page 2 par exemple, on clique sur une photo pour accéder à une nouvelle page qui présente la photo en grand, puis on fait "précédent" dans le navigateur, et la je reviens à la page 1 systématiquement. Comment faire pour mémoriser la page 2 dans ce cas ?

Merci d'avance !

[Watilin]

Bonjour !
Voici des indices :

• Les évènements pageshow et pagehide ;
• le localStorage.

Tu verras, c’est pas compliqué à utiliser.

Dans le cas présent, sessionStorage correspond même mieux au besoin, car l’information est spécifique à la page, et tu n’as pas besoin de nettoyer manuellement le storage quand tu n’en as plus besoin.

Attention à ne pas confondre, ça n’a rien à voir avec les sessions des technos serveurs (PHP, etc.) : le concept de « session » ici est un espace de stockage qui existe uniquement côté client, qui persiste lors d’un changement de page via une navigation normale ou via les boutons précédent / suivant, mais qui est détruit lorsqu’on ferme l’onglet ou la fenêtre. Deux pages d’un même site ouvertes dans deux onglets différents n’ont pas le même sessionStorage, et je pense que c’est pratique pour ce que tu veux faire.

[kizery]

Merci beaucoup je vais zyeuter tout ça

Je comprends à peut pres le principe de "sessionstorage" mais par contre, à mon niveau limité en javascript, je ne vois pas du tout comment l'appliquer à mon code

Code :

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

1
2
3
4
5
6
7
8
9
10
$('.sync-pagination').twbsPagination({
                      totalPages: parseInt('<?php echo $nombre_pages; ?>') ,
                      visiblePages: parseInt('<?php echo $nombre_pages; ?>') ,
                      next: 'Next',
                      prev: 'Prev',
                      onPageClick: function(event, page){
                      var param = 'l=' +page;
                      //fetch content and render here
                      $('#contenu_site').load('affichegallery.php?theme=', param);}});                                                    
            </script>

Voici le code de pagination en question, si jamais quelqu'un aurai une astuce

[Watilin]

Tu as trois choses à gérer :

1. l’ajout d’un écouteur de pagehide pour mémoriser la pagination quand la page est quittée ;
2. l’ajout d’un écouteur de pageshow pour agir à l’affichage / réaffichage de la page ;
3. l’ajout d’une option startPage dans l’initialisation twbsPagination.

Le petit piège étant que pageshow est émis après DOMContentLoaded (je n’ai pas trouvé de spec qui dit ça, mais j’ai lu à plusieurs endroits que ça semblait être tout le temps le cas).

Ainsi, il faut déplacer la création de ta pagination, de la fonction $(document).ready() vers l’écouteur pageshow.

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
window.addEventListener('pagehide', function () {
  sessionStorage.setItem('pagination',
    $('.sync-pagination').twbsPagination('getCurrentPage'));
});
 
window.addEventListener('pageshow', function () {
  let nbPages = parseInt('<?php echo $nombre_pages; ?>');
 
  // si rien dans le sessionStorage, renvoie null
  // l’opérateur || permet de choisir le 1 comme valeur par défaut
  let memorizedPage = parseInt( sessionStorage.getItem('pagination') || 1 );
 
  $('.sync-pagination').twbsPagination({
    totalPages   : nbPages,
    visiblePages : nbPages,
    startPage    : memorizedPage,
    next         : 'Next',
    prev         : 'Prev',
    onPageClick  : function (event, page) {
      // attention paramètre theme non traité
      let theme = '???';
      let param = 'theme=' + theme + '&l=' + page;
 
      //fetch content and render here
      $('#contenu_site').load('affichegallery.php', param);
    },
  });
});

[kizery]

Merci beaucoup pour ce petit cours

Je regarde ça dans la journée et reviens vers vous !

Merci encore.

[kizery]

Bon alors j'ai testé ton code (dont je te remercie encore pour cet effort) :

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
                  window.addEventListener('pagehide', function () {
  sessionStorage.setItem('pagination',
    $('.sync-pagination').twbsPagination('getCurrentPage'));
});
 
window.addEventListener('pageshow', function () {
  let nbPages = parseInt('<?php echo $nombre_pages; ?>');
 
  // si rien dans le sessionStorage, renvoie null
  // l’opérateur || permet de choisir le 1 comme valeur par défaut
  let memorizedPage = parseInt( sessionStorage.getItem('pagination') || 1 );
 
  $('.sync-pagination').twbsPagination({
    totalPages: parseInt('<?php echo $nombre_pages; ?>') ,
    visiblePages: parseInt('<?php echo $nombre_pages; ?>') ,
    startPage    : memorizedPage,
    next         : 'Next',
    prev         : 'Prev',
    onPageClick  : function (event, page) {
      // attention paramètre theme non traité
      let theme = 'vietnam';
      let param = 'theme=' + theme + '&l=' + page;
 
      //fetch content and render here
      $('#contenu_site').load('affichegallery.php', param);
    },
  });
});

Hélas, quelque chose cloche, cela n'a rien changé. J'arrive sur ma page 1, je clique sur page 2, j'ouvre une photo, je fais précédent, je retourne toujours à la page 1.


Pardon si j'ai mal compris mais, la première partie du code qui dois mémoriser la page active, est t elle chargé à chaque fois que je clique sur un numéro de page ?


En fait, je viens de reprendre mon code, qui maintenant ressemble à ça :

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
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
window.addEventListener('pagehide', function () {
  sessionStorage.setItem('pagination',
    $('.sync-pagination').twbsPagination('page'));
});
 
let memorizedPage = parseInt( sessionStorage.getItem('pagination') || 1 );
 
// document.write(memorizedPage);
// document.getElementById("contenu_site" ).innerHTML = memorizedPage;
 
 
 
$(document).ready(function ($) {
  'use strict';
 
  var nbPages = parseInt('<?php echo $nombre_pages; ?>');
 
  var clickedButton = 'home';
  var requestedPage = '1';
 
  $('#home').css('font-weight', 'bold').css('cursor', 'default').attr('disabled', true);
 
  var reloadGallery = function () {
  var param = 'theme=' + clickedButton + '&l=' + requestedPage;
 
  //fetch content and render here
  $('#contenu_site').load('affichegallery.php', param);
};
 
// appelle le plugin une seule fois
$('.sync-pagination').twbsPagination({
    totalPages   : nbPages,
    visiblePages : nbPages,
    next         : 'Next',
    prev         : 'Prev',
    onPageClick  : function (event, page) {
      requestedPage = String(page);
      reloadGallery();
    },
});
 
  // ajoute l’écouteur de click sur les deux boutons à la fois
$('#home, #vietnam').click(function () {
    var $thisButton = $(this);
 
  clickedButton = $thisButton.attr('id');
  reloadGallery();
 
  $('#home, #vietnam').css('font-weight', 'normal').css('cursor', 'pointer').attr('disabled', false);
 
  $thisButton.css('font-weight', 'bold').css('cursor', 'default').attr('disabled', true);
 
  });
});

Je n'ai donc plus qu'une page index.php qui gère tout.

J'ai ajouté les lignes ci-dessous en début du script pour voir ce qui se passe :

Code :

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

1
2
3
4
5
6
window.addEventListener('pagehide', function () {
  sessionStorage.setItem('pagination',
    $('.sync-pagination').twbsPagination('page'));
});
 
let memorizedPage = parseInt( sessionStorage.getItem('pagination') || 1 );

En fait, je vois bien memorizedPage = 1 quand j'arrive sur mon site. Cependant, quand je clique sur "page 2" , memorizedPage est toujours égal à 1.

Comment modifier memorizedPage à chaque clique sur un page ?


En fait, pour résumer la situation, j'ai une pagination similaire qui utilise surement du Ajax aussi ==> Si vous allé sur la page 3 par exemple, et que vous faites précédent, vous revenez bien sur la page 2 (ou 1 ou autres selon votre pages précédente).

Hors moi, je reviens toujours à la page du navigateur précédente (je suis sur google, je vais sur mon site, j'arrive sur la page 1, je clique sur page 2, je fais précédent dans mon navigateur, je reviens sur google et moi je voudrais la page 1). Je m'arrache les cheveux

[Watilin]

Pardon si j'ai mal compris mais, la première partie du code qui dois mémoriser la page active, est t elle chargé à chaque fois que je clique sur un numéro de page ?

Pas dans l’état, mais relis bien ce que j’ai écrit :

l’ajout d’un écouteur de pageshow pour agir à l’affichage / réaffichage de la page ;
[…]
Ainsi, il faut déplacer la création de ta pagination, de la fonction $(document).ready() vers l’écouteur pageshow.

Petit rappel, les bouts de script s’exécutent à différents moments par rapport à la façon dont ils sont écrits, et les évènements auxquels ils se rattachent.

Les instructions qui se trouvent en dehors de toute fonction (en gros, pour simplifier) sont exécutées au moment où le script est interprété. Dans 90 % des cas (code inclus dans la balise, ou bien attribut src présent mais pas d’attribut async ou defer), ça correspond au moment où la balise <script> est rencontrée par l’analyseur HTML. Si cette balise se trouve dans le <head> ou quelque part au milieu du <body>, le DOM n’est pas complètement prêt à ce moment. C’est pourquoi on utilise la fonction .ready().

Le code présent dans .ready() est appelé quand le navigateur émet l’évènement DOMContentLoaded, qui garantit que le DOM est prêt. Ça veut dire que les éléments HTML sur lesquels on veut agir existent tous.

Un autre évènement, load, est émis quand toutes les ressources (images, iframes, médias, etc.) de la page ont fini de charger. Ça peut arriver très tard (si les ressources sont lourdes ou s’il y a de la latence) ou à peu près au même moment que DOMContentLoaded. Dans tous les cas, load est émis après.

Finalement, pageshow est émis, et comme je l’ai dit précédemment, il semblerait qu’il soit toujours émis après load. Important, si la page est chargée depuis le cache, on ne peut pas être sûrs que DOMContentLoaded et load seront émis. pageshow est notre seule garantie dans ce cas.

Dans ton code, tu as mis l’instruction let memorizedPage = ... en dehors de toute fonction, elle est donc exécutée trop tôt. Tu dois la remettre dans l’écouteur de pageshow comme je l’avais écrit.

Comment modifier memorizedPage à chaque clique sur un page ?

La variable memorizedPage ne sert que pour la création de la pagination, tu n’as pas besoin de la mettre à jour à chaque clic. Le sessionStorage est mis à jour sur pagehide, c’est-à-dire au moment où la page est quittée.

Tu as un problème dans ton code :

Code :

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

$('.sync-pagination').twbsPagination('page'));

Le message d’erreur n’est pas très explicite :

TypeError: data[option] is undefined

Ça veut dire en fait que la méthode 'page' n’existe pas.

Je n’ai pas trouvé de documentation sur les différentes méthodes de ce plugin, mais en regardant dans le code source, on peut obtenir leurs noms :

destroy, show, enable, disable, buildListItems, buildItem, getPages, render, setupEvents, makeHref, makeText, getPageFromQueryString, generateQueryString, getSearchString, getCurrentPage.

J’avais trouvé getCurrentPage dans un exemple de code sur la page esimakin.github.io/twbs-pagination/ que tu as donnée dans ton premier post.

---

En fait, pour résumer la situation, j'ai une pagination similaire à cette page, qui utilise surement du Ajax aussi

Oui, c’est bien de l’ajax.

Hors moi, je reviens toujours à la page du navigateur précédente (je suis sur google, je vais sur mon site, j'arrive sur la page 1, je clique sur page 2, je fais précédent dans mon navigateur, je reviens sur google et moi je voudrais la page 1). Je m'arrache les cheveux

C’est une technologie complètement différente de pageshow et pagehide, il s’agit de manipuler l’historique en y ajoutant des entrées qui ne correspondent pas à des pages au sens classique (un fichier envoyé par un serveur).

Je t’invite à lire le guide Manipuler l’historique de l’utilisateur

[kizery]

J'ai reussi quelque chose en faisant ça :

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
33
34
35
36
37
38
39
$(document).ready(function ($) {
  'use strict';
 
  var nbPages = parseInt('<?php echo $nombre_pages; ?>');
 
  var clickedButton = 'home';
  var requestedPage = '1';
 
  $('#home').css('font-weight', 'bold').css('cursor', 'default').attr('disabled', true);
 
  var reloadGallery = function () {
  var param = 'theme=' + clickedButton + '&l=' + requestedPage;
 
  //fetch content and render here
  $('#contenu_site').load('affichegallery.php', param);
};
 
// appelle le plugin une seule fois
$('.sync-pagination').twbsPagination({
    totalPages   : nbPages,
    visiblePages : nbPages,
    next         : 'Next',
    prev         : 'Prev',
    onPageClick  : function (event, page) {
      requestedPage = page;
      location.hash = requestedPage;
 
      reloadGallery();  } 
 
});
 
window.onhashchange = function(){       
    if(location.hash.length > 1)      
        requestedPage = parseInt(location.hash.replace('#','')); // Get hashtag for get times click
    else
        requestedPage= 1;    
 
      reloadGallery();
}

Maintenant j'ai bien le numéro de la page qui s'actualise dans mon URL.

Par exemple j'ai http://localhost/portfolio/#2 quand je suis sur la page 2.

En faisant précédent dans le navigateur j'appel bien reloadGallery(); avec le bon numéro de page en paramètre, et j'ai donc http://localhost/portfolio/#1 maintenant .

Par contre, ma barre de navigation reste à l'état de la page précédente :



Je n'arrive pas à gérer le "startPage" pour que celui-ci s'actualise en fonction de "pagerequested"