Pagination Php Ajax MySQL

Cette deuxiè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) Version MySQL

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, et de la ligne 27 à 29 créer votre présentation avec vos données dynamiques.

            <?php
            if($_POST['page'])
            {
            $page = $_POST['page'];
            $cur_page = $page;
            $page -= 1;
            $per_page = 2;
            $previous_btn = true;
            $next_btn = true;
            $first_btn = true;
            $last_btn = true;
            $start = $page * $per_page;
            //connexion MySQL
            include('include/db.php');
            
            //requete query
            $query_pag_data = "SELECT tuto_pres2.*, tuto_categ.catid, tuto_categ.catname FROM tuto_pres2, tuto_categ WHERE tuto_categ.catid=tuto_pres2.categorie AND tuto_pres2.categorie='4' AND tuto_pres2.visible='oui' ORDER BY id_tuto DESC LIMIT $start,$per_page"; //IN(".implode(',', $num)." )
            
            
            $result_pag_data = mysql_query($query_pag_data) or die('MySql Error' . mysql_error());
            $totalRows = mysql_num_rows($result_pag_data);
            $msg = "";
            
            if ($totalRows > 0) {
            while ($row = mysql_fetch_array($result_pag_data)) {
            
                echo '<div class="shopp">';
                echo '<p>Ici votre code de présentation de vos données dynamiques</p>'; 
                echo '</div>';
            
              }
            }
            if ($totalRows == 0) {
              echo '<p class="rouge">Il n\'y a pas de tuto actuellement</p>';
             }
            
            /*requete de comptage*/
            $query_pag_num = "SELECT COUNT(*) AS count FROM tuto_pres2 WHERE visible='oui' AND categorie='4' ";
            $result_pag_num = mysql_query($query_pag_num);
            $row = mysql_fetch_array($result_pag_num);
            $count = $row['count'];
            $no_of_paginations = ceil($count / $per_page);
            
            /*Calculating the starting and endign values for the loop*/
            if ($cur_page >= 7) {
                $start_loop = $cur_page - 3;
                if ($no_of_paginations > $cur_page + 3)
                    $end_loop = $cur_page + 3;
                else if ($cur_page <= $no_of_paginations && $cur_page > $no_of_paginations - 6) {
                    $start_loop = $no_of_paginations - 6;
                    $end_loop = $no_of_paginations;
                } else {
                    $end_loop = $no_of_paginations;
                }
            } else {
                $start_loop = 1;
                if ($no_of_paginations > 7)
                    $end_loop = 7;
                else
                    $end_loop = $no_of_paginations;
            }
            
            $msg .= "<div class='pagination'><ul>";
            
            // FOR ENABLING THE FIRST BUTTON
            if ($first_btn && $cur_page > 1) {
                $msg .= "<li p='1' class='active'>Premier</li>";
            } else if ($first_btn) {
                $msg .= "<li p='1' class='inactive'>Premier</li>";
            }
            
            // FOR ENABLING THE PREVIOUS BUTTON
            if ($previous_btn && $cur_page > 1) {
                $pre = $cur_page - 1;
                $msg .= "<li p='$pre' class='active'>Précédent</li>";
            } else if ($previous_btn) {
                $msg .= "<li class='inactive'>Précédent</li>";
            }
            for ($i = $start_loop; $i <= $end_loop; $i++) {
            
                if ($cur_page == $i)
                    $msg .= "<li p='$i' style='color:#fff;background-color:#535353;' class='active'>{$i}</li>";
                else
                    $msg .= "<li p='$i' class='active'>{$i}</li>";
            }//
            
            // TO ENABLE THE NEXT BUTTON
            if ($next_btn && $cur_page < $no_of_paginations) {
                $nex = $cur_page + 1;
                $msg .= "<li p='$nex' class='active'>Suivant</li>";
            } else if ($next_btn) {
                $msg .= "<li class='inactive'>Suivant</li>";
            }
            
            // TO ENABLE THE END BUTTON
            if ($last_btn && $cur_page < $no_of_paginations) {
                $msg .= "<li p='$no_of_paginations' class='active'>Dernier</li>";
            } else if ($last_btn) {
                $msg .= "<li p='$no_of_paginations' class='inactive'>Dernier</li>";
            }
            $total_string = "<span class='total' a='$no_of_paginations'>Page <b>" . $cur_page . "</b> sur <b>$no_of_paginations</b></span>";
            $msg = $msg . "</ul>" . $goto . $total_string . "</div>";  // Content for pagination
            echo $msg;
            }
            ?>		
        

La page (load_data.php) Version PDO

Voici la même page, mais le code convertis en PDO

             <?php 
            session_start(); // si utilisation des sessions dans la requete
            header('Content-Type: text/html; charset=utf-8');?>
            <?php
            if($_POST['page'])
            {
            $page = $_POST['page'];
            $cur_page = $page;
            $page -= 1;
            $per_page = 2;
            $previous_btn = true;
            $next_btn = true;
            $first_btn = true;
            $last_btn = true;
            $start = $page * $per_page;
            include('include/cnxPDO.php');
            
            $query_pag_data = $PDO->prepare("SELECT tuto_pres2.*, tuto_categ.catid, tuto_categ.catname FROM tuto_pres2, tuto_categ WHERE tuto_categ.catid=tuto_pres2.categorie AND tuto_pres2.categorie ".$_SESSION['categ']." AND tuto_pres2.visible='oui' ORDER BY id_tuto DESC LIMIT $start,$per_page");
            $query_pag_data->execute();
            $totalRows = $query_pag_data->rowCount();
            
            $msg = "";
            
            if ($totalRows > 0) {
            while ($row = $query_pag_data->fetch(PDO::FETCH_ASSOC)) {
                echo '<div class="shopp">';
                echo 'ici presentation de vos blocs avec vos variables dynamiques';
                echo '</div>';
            
              }
            }
            if ($totalRows == 0) {
              echo '<p class="rouge">Il n\'y a pas de tuto actuellement</p>';
             }
            
            /* --------------------------------------------- */
            $session = $_SESSION['categ'];
            $query_pag_num = $PDO->query("SELECT COUNT(id_tuto) FROM tuto_pres2 WHERE visible='oui' AND categorie".$session." ")->fetch(PDO::FETCH_NUM);
            $no_of_paginations = ceil($query_pag_num[0]/$per_page);
            
            /* ---------------Calcule des pages----------------------------------- */
            if ($cur_page >= 7) {
                $start_loop = $cur_page - 3;
                if ($no_of_paginations > $cur_page + 3)
                    $end_loop = $cur_page + 3;
                else if ($cur_page <= $no_of_paginations && $cur_page > $no_of_paginations - 6) {
                    $start_loop = $no_of_paginations - 6;
                    $end_loop = $no_of_paginations;
                } else {
                    $end_loop = $no_of_paginations;
                }
            } else {
                $start_loop = 1;
                if ($no_of_paginations > 7)
                    $end_loop = 7;
                else
                    $end_loop = $no_of_paginations;
            }
            /* ----------------------------------------------------------------------------------------------------------- */
            $msg .= "<div class='pagination'><ul>";
            
            // premier bouton
            if ($first_btn && $cur_page > 1) {
                $msg .= "<li p='1' class='active'>Premier</li>";
            } else if ($first_btn) {
                $msg .= "<li p='1' class='inactive'>Premier</li>";
            }
            
            // bouton precedent
            if ($previous_btn && $cur_page > 1) {
                $pre = $cur_page - 1;
                $msg .= "<li p='$pre' class='active'>Précédent</li>";
            } else if ($previous_btn) {
                $msg .= "<li class='inactive'>Précédent</li>";
            }
            for ($i = $start_loop; $i <= $end_loop; $i++) {
            
                if ($cur_page == $i)
                    $msg .= "<li p='$i' style='color:#fff;background-color:#535353;' class='active'>{$i}</li>";
                else
                    $msg .= "<li p='$i' class='active'>{$i}</li>";
            }//
            
            // bouton suivant
            if ($next_btn && $cur_page < $no_of_paginations) {
                $nex = $cur_page + 1;
                $msg .= "<li p='$nex' class='active'>Suivant</li>";
            } else if ($next_btn) {
                $msg .= "<li class='inactive'>Suivant</li>";
            }
            
            // fin bouton
            if ($last_btn && $cur_page < $no_of_paginations) {
                $msg .= "<li p='$no_of_paginations' class='active'>Dernier</li>";
            } else if ($last_btn) {
                $msg .= "<li p='$no_of_paginations' class='inactive'>Dernier</li>";
            }
            $total_string = "<span class='total' a='$no_of_paginations'>Page <b>" . $cur_page . "</b> sur <b>$no_of_paginations</b></span>";
            $msg = $msg . "</ul>" . $goto . $total_string . "</div>";  // Content for pagination
            echo $msg;
            }
        

Code Html

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

            <div id="loading"></div>
            <div id="contuto">
            <div class="pagination"></div>
            </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>
            $(document).ready(function(){
                function loading_show(){
                    $('#loading').html("<img src='images/loader.gif'/>").fadeIn('fast');
                }
                function loading_hide(){
                    $('#loading').fadeOut('fast');
                }                
                function loadData(page){
                    loading_show();                    
                    $.ajax
                    ({
                        type: "POST",
                        url: "load_data_accueil.php",
                        data: "page="+page,
                        success: function(msg)
                        {
                            $(document).ajaxComplete(function(event, request, settings)
                            {
                                loading_hide();
                                $("#contuto").html(msg);
                            });
                        }
                    });
                }
                loadData(1);  // For first time page load default results
				$(document).on('click', '#contuto .pagination li.active', function(){
                    var page = $(this).attr('p');
                    loadData(page);
                    
                });
				
				           
				$(document).on('click', '#go_btn', function(){
                    var page = parseInt($('.goto').val());
                    var no_of_pages = parseInt($('.total').attr('a'));
                    if(page != 0 && page <= no_of_pages){
                        loadData(page);
                    }else{
                        alert('Entrer un numéro entre 1 et '+no_of_pages);
                        $('.goto').val("").focus();
                        return false;
                    }
                    
                });
            });
        </script>
       

Code CSS

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

            #loading{
                width:100px ;
                float:left;
                margin:200px auto 0 250px;
            }
            .pagination{
              width: 650px;
              height: 27px;
              margin: 35px 0 20px 0; padding:5px;
              background-color:#E9E9E9;
            }
            
            .pagination ul li{
              list-style: none;
              float: left;
              border: 1px solid #ccc;/*006699*/
              padding: 3px 6px 3px 6px;
              margin: 0 3px 0 0px;
              font-family: arial;
              font-size: 12px;
              font-weight: bold;
              color:#333;
              background-color: #c1c0c0;
              border-radius:6px;-moz-border-radius:6px;-webkit-border-radius:6px;
            }
            
            .pagination ul li.inactive,
            .pagination ul li.inactive:hover{
              background-color:#c1c0c0;/*e3f1fa*/
              color:#E4E4E4;/*bababa*/
              border:1px solid #ccc;
              cursor: pointer;
            }
            
            .pagination ul li:hover{
              color: #fff; font-weight:bold;
              background-color: #c1c0c0;
              cursor: pointer;
            }
            .total
            {
              float:right; 
              color:#999; 
              font-size:11px; 
              margin:5px 5px 0 0;
            }