Pagination Php Ajax PDO

Cette troisième version de pagination, vous permettra de réaliser une pagination avec l'une de vos tables MySQL.

Ce script exige la présence d'un fichier inclus dans une fonction Ajax, dans la page principale, ce dernier contient le code Php, la pagination et la présentation de vos blocs.
Nous allons commencer, par la page principale.

La page (load_data.php)

Copier ce code dans une page (vierge) que vous nommerez (load_data.php). C'est dans cette page que vous devez créer vos requêtes MySQL / PDO.

          <?php
              /*DB configuration Constantes*/
              define('_HOST_NAME_', 'localhost');
              define('_USER_NAME_', 'XXXXXX');
              define('_DB_PASSWORD', 'XXXXXX');
              define('_DATABASE_NAME_', 'XXXXXX');
              
              /*PDO Database Connection*/
              try {
                  $databaseConnection = new PDO('mysql:host='._HOST_NAME_.';dbname='._DATABASE_NAME_, _USER_NAME_, _DB_PASSWORD);
                  $databaseConnection->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
              } catch(PDOException $e) {
                  echo 'ERROR: ' . $e->getMessage();
              }
              //on selectionne toute la table
				 //des critères peuvent être ajoutés tel qu'un numéro de catégorie, ou la visibilité = oui ou non
              $sqlQuery 	= $PDO->query("SELECT * FROM tuto_pres");
              $count = $sqlQuery->rowCount();
          
              $adjacents = 2;
              $records_per_page = 5;
              
              $page = (int) (isset($_POST['page_id']) ? $_POST['page_id'] : 1);
              $page = ($page == 0 ? 1 : $page);
              $start = ($page-1) * $records_per_page;
              
              $next = $page + 1;    
              $prev = $page - 1;
              $last_page = ceil($count/$records_per_page);
              $second_last = $last_page - 1; 
          
              
              $pagination = "";
              if($last_page > 1){
                  $pagination .= "<div class='pagination'>";
                  if($page > 1)
                      $pagination.= "<a href='javascript:void(0);' onClick='change_page(1);'>« First</a>";
                  else
                      $pagination.= "<span class='disabled'>« First</span>";
                  
                  if ($page > 1)
                      $pagination.= "<a href='javascript:void(0);' onClick='change_page(".($prev).");'>« Previous  </a>";
                  else
                      $pagination.= "<span class='disabled'>« Previous  </span>";   
                  
                  if ($last_page < 7 + ($adjacents * 2))
                  {   
                      for ($counter = 1; $counter <= $last_page; $counter++)
                      {
                          if ($counter == $page)
                              $pagination.= "<span class='current'>$counter</span>";
                          else
                              $pagination.= "<a href='javascript:void(0);' onClick='change_page(".($counter).");'>$counter</a>";     
                                   
                      }
                  }
                  elseif($last_page > 5 + ($adjacents * 2))
                  {
                      if($page < 1 + ($adjacents * 2))
                      {
                          for($counter = 1; $counter < 4 + ($adjacents * 2); $counter++)
                          {
                              if($counter == $page)
                                  $pagination.= "<span class='current'>$counter</span>";
                              else
                                  $pagination.= "<a href='javascript:void(0);' onClick='change_page(".($counter).");'>$counter</a>";     
                          }
                          $pagination.= "...";
                          $pagination.= "<a href='javascript:void(0);' onClick='change_page(".($second_last).");'> $second_last</a>";
                          $pagination.= "<a href='javascript:void(0);' onClick='change_page(".($last_page).");'>$last_page</a>";   
                     
                     }
                     elseif($last_page - ($adjacents * 2) > $page && $page > ($adjacents * 2))
                     {
                         $pagination.= "<a href='javascript:void(0);' onClick='change_page(1);'>1</a>";
                         $pagination.= "<a href='javascript:void(0);' onClick='change_page(2);'>2</a>";
                         $pagination.= "...";
                         for($counter = $page - $adjacents; $counter <= $page + $adjacents; $counter++)
                         {
                             if($counter == $page)
                                 $pagination.= "<span class='current'>$counter</span>";
                             else
                                 $pagination.= "<a href='javascript:void(0);' onClick='change_page(".($counter).");'>$counter</a>";     
                         }
                         $pagination.= "..";
                         $pagination.= "<a href='javascript:void(0);' onClick='change_page(".($second_last).");'>$second_last</a>";
                         $pagination.= "<a href='javascript:void(0);' onClick='change_page(".($last_page).");'>$last_page</a>";   
                     }
                     else
                     {
                         $pagination.= "<a href='javascript:void(0);' onClick='change_page(1);'>1</a>";
                         $pagination.= "<a href='javascript:void(0);' onClick='change_page(2);'>2</a>";
                         $pagination.= "..";
                         for($counter = $last_page - (2 + ($adjacents * 2)); $counter <= $last_page; $counter++)
                         {
                             if($counter == $page)
                                  $pagination.= "<span class='current'>$counter</span>";
                             else
                                  $pagination.= "<a href='javascript:void(0);' onClick='change_page(".($counter).");'>$counter</a>";     
                         }
                     }
                  }
                  if($page < $counter - 1)
                      $pagination.= "<a href='javascript:void(0);' onClick='change_page(".($next).");'>Next »</a>";
                  else
                      $pagination.= "<span class='disabled'>Next »</span>";
                  
                  if($page < $last_page)
                      $pagination.= "<a href='javascript:void(0);' onClick='change_page(".($last_page).");'>Last »</a>";
                  else
                      $pagination.= "<span class='disabled'>Last »</span>";
                  
                  $pagination.= "</div>";       
              }
          
          
          $records 	= $PDO->query("SELECT * FROM tuto_pres LIMIT $start, $records_per_page");
          $count  	= $records->rowCount();
          $HTML='';
          if($count > 0)
          {
              foreach($records as $row) {
				//bloc foreach qui contiendra vos données dynamique mais aussi le bloc de présentation.
                  $HTML.='<div>';
                  $HTML.= $row['titre_tuto'];
                  $HTML.='</div><br/>';
              }
          }
          else
          {
              $HTML='Pas de données disponible';
          }
          echo $HTML;
          echo $pagination;
          ?>        

Code Html

Copier ce code dans la partie body de votre page principale (index).

          <div class='container'>    
              <h1>Pagination PHP, PDO et JQuery</h1>
              <div id="page_data"></div>
              <span class="flash"></span>
          </div>
       

Code JavaScript

La fonction Javascript à insérer dans la page index, ainsi que la feuille de style. Bien sûr la librairie JQuery est requise, via CDN ou locale.

            <script type="text/javascript">
            $(document).ready(function(){
                change_page('0');
            });
            function change_page(page_id){
                 $(".flash").show();
                 $(".flash").fadeIn(400).html('Loading <img src="ajax-loader.gif" />');
                 var dataString = 'page_id='+ page_id;
                 $.ajax({
                       type: "POST",
                       url: "load_data.php",
                       data: dataString,
                       cache: false,
                       success: function(result){
                       $(".flash").hide();
                             $("#page_data").html(result);
                       }
                  });
            }
            </script>
       

Code CSS

Code CSS à copier dans un fichier (.css) et à personnaliser selon votre design et à adapter.

          .container{font-family:tahoma;size:12px;top:10%;border:1px solid #CDCDCD;border-radius:10px;padding:10px;width:50%;}
          .result{color:#FF0000;}
          h1{margin:3px 0;font-size:13px;text-decoration:underline;}
          div.pagination {
          padding: 3px;
          margin: 3px;
          text-align:center;
          font-family:tahoma;
          font-size:12px;
          }
          
          div.pagination a {
          padding: 2px 5px 2px 5px;
          margin: 2px;
          border: 1px solid #007799;
          
          text-decoration: none; /* no underline */
          color: #006699;
          }
          div.pagination a:hover, div.digg a:active {
          border: 1px solid #006699;
          
          color: #000;
          }
          div.pagination span.current {
          padding: 2px 5px 2px 5px;
          margin: 2px;
          border: 1px solid #006699;
          
          font-weight: bold;
          background-color: #006699;
          color: #FFF;
          }
          div.pagination span.disabled {
          padding: 2px 5px 2px 5px;
          margin: 2px;
          border: 1px solid #EEE;
          color: #DDD;
          }