Combiner PHP pagination avec Ajax ?

**kizery** · 31/05/2018, 04h36

Bonjour à tous,

Etant débutant en programmation PHP, et complètement néophyte en JavaScript je suis bloqué dans le développement de mon portfolio et je m'arrache les cheveux

.

En fait, j'affiche une galerie dans une balise <div> en récupérant les liens de mes images dans ma base de donnée, puis en utilisant ce script j'affiche 15 images par page, et incrémentant une barre de navigation pour afficher les 15 images suivantes et ce temps qu'il y a des images dans la BDD.

Sauf que, avec ce script, chaque fois que je passe au 15 images suivantes, la totalité de la page est rechargé, hors j'aimerai que seul le div contenant les 15 images soit mis à jours.

Mais vu la complexité de mon PHP, je n'ai aucune idée de comment appliquer JAVAX pour faire ça. Quelqu'un pourrait m'aider ?

Voici mon code (il est en construction, j'ai un gros nettoyage a faire dessus + sécurisation je sais !) :

Code html :

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
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
<?php
function barre_navigation ($nb_total,
  $nb_affichage_par_page,
  $debut,
  $nb_liens_dans_la_barre) {
 
  $barre = '';
 
  // on recherche l'URL courante munie de ses paramètre auxquels on ajoute le paramètre 'debut' qui jouera le role du premier élément de notre LIMIT
  if ($_SERVER['QUERY_STRING'] == "") {
  $query = $_SERVER['PHP_SELF'].'?debut=';
  }
  else {
  $tableau = explode ("debut=", $_SERVER['QUERY_STRING']);
  $nb_element = count ($tableau);
  if ($nb_element == 1) {
    $query = $_SERVER['PHP_SELF'].'?'.$_SERVER['QUERY_STRING'].'&debut=';
  }
  else {
    if ($tableau[0] == "") {
    $query = $_SERVER['PHP_SELF'].'?debut=';
    }
    else {
    $query = $_SERVER['PHP_SELF'].'?'.$tableau[0].'debut=';
    }
  }
  }
 
  // on calcul le numéro de la page active
  $page_active = floor(($debut/$nb_affichage_par_page)+1);
  // on calcul le nombre de pages total que va prendre notre affichage
  $nb_pages_total = ceil($nb_total/$nb_affichage_par_page);
 
  // on calcul le premier numero de la barre qui va s'afficher, ainsi que le dernier ($cpt_deb et $cpt_fin)
  // exemple : 2 3 4 5 6 7 8 9 10 11 << $cpt_deb = 2 et $cpt_fin = 11
  if ($nb_liens_dans_la_barre%2==0) {
  $cpt_deb1 = $page_active - ($nb_liens_dans_la_barre/2)+1;
  $cpt_fin1 = $page_active + ($nb_liens_dans_la_barre/2);
  }
  else {
  $cpt_deb1 = $page_active - floor(($nb_liens_dans_la_barre/2));
  $cpt_fin1 = $page_active + floor(($nb_liens_dans_la_barre/2));
  }
 
  if ($cpt_deb1 <= 1) {
  $cpt_deb = 1;
  $cpt_fin = $nb_liens_dans_la_barre;
  }
  elseif ($cpt_deb1>1 && $cpt_fin1<$nb_pages_total) {
  $cpt_deb = $cpt_deb1;
  $cpt_fin = $cpt_fin1;
  }
  else {
  $cpt_deb = ($nb_pages_total-$nb_liens_dans_la_barre)+1;
  $cpt_fin = $nb_pages_total;
  }
 
  if ($nb_pages_total <= $nb_liens_dans_la_barre) {
  $cpt_deb=1;
  $cpt_fin=$nb_pages_total;
  }
 
  // si le premier numéro qui s'affiche est différent de 1, on affiche << qui sera un lien vers la premiere page
  if ($cpt_deb != 1) {
  $cible = $query.(0);
  $lien = '<A HREF="'.$cible.'">&lt;&lt;</A>&nbsp;&nbsp;';
  }
  else {
  $lien='';
  }
  $barre .= $lien;
 
  // on affiche tous les liens de notre barre, tout en vérifiant de ne pas mettre de lien pour la page active
  for ($cpt = $cpt_deb; $cpt <= $cpt_fin; $cpt++) {
  if ($cpt == $page_active) {
    if ($cpt == $nb_pages_total) {
    $barre .= $cpt;
    }
    else {
    $barre .= $cpt.'&nbsp;-&nbsp;';
    }
  }
  else {
    if ($cpt == $cpt_fin) {
    $barre .= "<A HREF='".$query.(($cpt-1)*$nb_affichage_par_page);
    $barre .= "'>".$cpt."</A>";
    }
    else {
 
    $barre .= "<A HREF='".$query.(($cpt-1)*$nb_affichage_par_page);
    $barre .= "'>".$cpt."</A>&nbsp;-&nbsp;";
    }
  }
  }
 
  $fin = ($nb_total - ($nb_total % $nb_affichage_par_page));
  if (($nb_total % $nb_affichage_par_page) == 0) {
  $fin = $fin - $nb_affichage_par_page;
  }
 
  // si $cpt_fin ne vaut pas la dernière page de la barre de navigation, on affiche un >> qui sera un lien vers la dernière page de navigation
  if ($cpt_fin != $nb_pages_total) {
  $cible = $query.$fin;
  $lien = '&nbsp;&nbsp;<A HREF="'.$cible.'">&gt;&gt;</A>';
  }
  else {
  $lien='';
  }
  $barre .= $lien;
 
  return $barre;
}
?>
<!DOCTYPE html >
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" >
<head>
 <title>xxxx</title>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 <link rel="stylesheet" href="style.css" />
 <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
 <script type="text/javascript" src="zoombox/zoombox.js"></script>
 <link href="zoombox/zoombox.css" rel="stylesheet" type="text/css" media="screen" />
 <script type="text/javascript">
  jQuery(function($){
    $('a.zoombox').zoombox({
      gallery : false,
    });
  });
</script>
</head>
 
<body>
  <div id="bloc_page">
 
    <?php include("header.php"); ?>            
 
    <div id="contenu_site">
      <div id="menu_galerie">
 
        <!-- Recuperer toutes les URL des images dans le dossier galerie -->
        <?php 
 
          try
            {
              $bdd = new PDO('mysql:host=localhost;dbname=mes_images;charset=utf8', '', '');
            }
            catch(Exception $e)
            {
                    die('Erreur : '.$e->getMessage());
            }
 
            // on execute une requête permettant de calculer le nombre total d'éléments qu'il faudra afficher sur nos différentes pages
            $resultat = $bdd->query('SELECT count(*) FROM gallery') or die('Erreur SQL !<br />'.$sql.'<br />'.mysql_error());
            
 
            // on récupère le nombre d'éléments à afficher
            $nb_total = $resultat->fetch();
 
            // on teste si ce nombre de vaut pas 0
            if (($nb_total = $nb_total[0]) == 0) {
              echo 'Aucune réponse trouvée';
            }
            else
 
            {
 
              if (!isset($_GET['debut'])) $_GET['debut'] = 0;
 
              $nb_affichage_par_page = 10;
 
              // on exécute la requête
              $req = $bdd->query('SELECT adresse, datelieu, imgtitle FROM gallery ORDER BY ID DESC LIMIT '.$_GET['debut'].','.$nb_affichage_par_page) or die('Erreur SQL !<br />'.$sql.'<br />'.mysql_error());
 
              // on va scanner tous les tuples un par un
              while ($data = $req->fetch()) {
                // on affiches les résultats dans la <table>
                ?>
                <figure>
 
                <a class="zoombox zgallery1" href='<?php echo htmlspecialchars($data['adresse']); ?>'>
                  <img src="<?php echo htmlspecialchars($data['adresse']); ?>" alt="<?php htmlspecialchars($data['imgtitle']); ?>">
                  <figcaption>
                    <?php echo htmlspecialchars($data['imgtitle']); ?> <br />
                    <em><?php echo htmlspecialchars($data['datelieu']); ?></em>
                  </figcaption>
                </a>
 
              </figure>
              <?php
 
              }
 
              // on libère l'espace mémoire alloué pour cette requête
              $req->closeCursor();
              
 
             
              
            }
          
            
          ?>
         // on affiche enfin notre barre
      </div>
      <button id="barrenav"><?php echo barre_navigation($nb_total, $nb_affichage_par_page, $_GET['debut'], 10);  ?></button>
    </div>
 
    <?php include("footer.php"); ?>
 
  </div> 
</body>
 
</html>

**NoSmoking** · 01/06/2018, 08h32

Bonjour,
si on regarde comment est structuré ton document on arrive à :

┌──────────────────────────────────┐
│ MAIN-PAGE                        │
│                                  │
│  ╔════════════════════════════╗  │
│  ║ GALERIE                    ║  │
│  ║┌─────┐┌─────┐┌─────┐┌─────┐║  │
│  ║│░░░░░││░░░░░││░░░░░││░░░░░│║  │
│  ║│▒▒▒▒▒││▒▒▒▒▒││▒▒▒▒▒││▒▒▒▒▒│║  │
│  ║└─────┘└─────┘└─────┘└─────┘║  │
│  ╚════════════════════════════╝  │
└──────────────────────────────────┘

Tu as bien compris qu'au premier appel tu affiches la page qui inclus la galerie, photos 1 à 15.

Au click sur le bouton [page-next] il ne te faut, dans ce cas, ne récupérer QUE le code HTML de la galerie pour les photos 16 à 30 et rien d'autre.

Cela veut dire que côté serveur il te faut structurer en conséquence (lecture datas de n à n+15, affichage galerie, pagination).
Dans un premier temps cela relève plus du forum PHP que du JavaScript même si l'approche Ajax est une bonne approche.

**kizery** · 01/06/2018, 15h54

Oui, en fait j'ai réussi à faire tout ce que je voulais finalement, merci de t'être intéressé à mon sujet !

**NoSmoking** · 01/06/2018, 19h18

... j'ai réussi à faire tout ce que je voulais ...

Super

!

Peut-être pourrais-tu

partager ta solution, cela peut en aider d'autres, c'est également cela un forum de partage
mettre la discussion en résolue, lors d'une recherche de solution, les lecteurs peuvent se concentrer sur les sujets qui ont ce tag.

**kizery** · 02/06/2018, 06h35

Bien sûr ! Autant pour moi

En fait j'ai utilisé le script js "pagination" ==> https://esimakin.github.io/twbs-pagination/

Très simple à intégrer et utiliser.

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
<script>
 
                  $('#bloc_page').twbsPagination({
                      totalPages: parseInt('<?php echo $nombre_pages; ?>') ,  //ici j'utilise plutôt une variable PHP contenant le nombre de page que j'ai calculé en amont
                      visiblePages: parseInt('<?php echo $nombre_pages; ?>') ,
                      next: 'Next',
                      prev: 'Prev',
                      onPageClick: function(event, page)
                      {
                      var param = 'l=' +page; // ici j'ai ajouté un paramètre qui envoie une variable contenant le numéro de la page active à ma page .php
                      //fetch content and render here
                      $('#contenu_site').load('affichegallery.php', param);
                      }});
 
 </script>

Pour le reste, tout est expliqué sur la page du plugin

Combiner PHP pagination avec Ajax ?

AJAX

Discussions similaires

Partager

Partager