Pagination Php Ajax MySQL

Cette première 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 la page principale, ce dernier est dédié uniquement à la pagination de la page principale.
Nous allons commencer, par la page principale.

Code PHP

Le code Php ci-dessous sera implémenté au-dessus du DOCTYPE.
Cependant, regarder les lignes verte. La ligne 22 pourrait vous servir. La ligne 24 est la requête principale (requête fictive) de votre ou vos tables. Les lignes 28 à 31 est la zone de d'affichage selon vos données dynamiques.
La ligne 34 et la fermeture du if, et le commencement du else et la ligne 35 le tag de fermeture php.
A partir de la ligne 36 sera tout le code HTML, et la ligne 37 et la fermeture du else qui doit être après le tag de fin </html>.
Le code ci-dessous possèdent des commentaires pour vous repérer.
Toutefois je laisse le code MySQL, mais sachez que ce type de requête finira par disparaître.

Ce code PHP utilise des requêtes MySQL

            <?php 
            require_once('include/db.php'); // include connexion db
            $action = (isset($_REQUEST['action'])&& $_REQUEST['action'] !=NULL)?$_REQUEST['action']:'';
            if($action == 'ajax'){
                include 'pagination.php'; //include pagination
                
                
                //pagination variables
                $page = (isset($_REQUEST['page']) && !empty($_REQUEST['page']))?$_REQUEST['page']:1;
                $per_page = 2; //Nombre de bloc par page
                $adjacents  = 2; //écart entre les numéros de page de la pagination
                $offset = ($page - 1) * $per_page;
                
                //Nombre total de ligne dans la table*/
                $count_query   = mysql_query("SELECT COUNT(*) AS numrows FROM tuto_pres2 WHERE visible='oui' AND categorie ".$_SESSION['categ']." ");
                $row     = mysql_fetch_array($count_query);
                $numrows = $row['numrows'];
                $total_pages = ceil($numrows/$per_page);
                $reload = 'index_pagination1.php';
            
                //array des catégories
                $num = array('1','2','3','4','20','21');
                //requete query sur l'array $num ou session
                $query = mysql_query("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 $offset,$per_page"); //IN(".implode(',', $num)." )
                $query = mysql_query("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 IN(".implode(',', $num)." ) AND tuto_pres2.visible='oui' ORDER BY id_tuto DESC LIMIT $offset,$per_page");

                //loop through fetched data
            while($row = mysql_fetch_array($query)){
                echo '<div class="shopp">';
                echo '<p>Ici la présentation avec vos données dynamique</p>'; 
               
                echo '</div>';
            }
            echo paginate($reload, $page, $total_pages, $adjacents);
            } else{
            ?>
            <!doctype html>
            <?php }?>        
	 

Code convertis en PDO

Dans le script j'utilise (session_start() ) puisque dans la requête j'y fait référence pour les catégories. En fait tout dépend de votre requête, celle présentée est fictive.
Sinon pour le code Html, le code JavaScript et le code CSS c'est exactement la même chose.
Quant à la démo cette dernière fonctionne en PDO.

 <?php 
session_start();
header('Content-Type: text/html; charset=utf-8');

$action = (isset($_REQUEST['action'])&& $_REQUEST['action'] !=NULL)?$_REQUEST['action']:'';
if($action == 'ajax'){
	include('include/cnxPDO.php'); // include connexion db
	include 'pagination.php'; //include pagination
	
	
	//pagination variables
	$page = (isset($_REQUEST['page']) && !empty($_REQUEST['page']))?$_REQUEST['page']:1;
	$per_page = 2; //Nombre de bloc par page
	$adjacents  = 2; //écart entre les numéros de page de la pagination
	$offset = ($page - 1) * $per_page;
	
	//Nombre total de ligne dans la table*/
	try
	{
		$session = $_SESSION['categ'];
		$count_query = $PDO->query("SELECT COUNT(id_tuto) FROM tuto_pres2 WHERE visible='oui' AND categorie".$session." ")->fetch(PDO::FETCH_NUM);
		
		$total_pages = ceil($count_query[0]/$per_page);
	    $reload = 'index_pagination1.php';

		$query = $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 $offset,$per_page");
		$query->execute();

		while($row = $query->fetch(PDO::FETCH_ASSOC))
		{
			
			echo 'Ici dans le while il contiendra le bloc div avec vos variables dynamiques.';
		}
		
		echo paginate($reload, $page, $total_pages, $adjacents);

	}// fin try
	catch (Exception $e)
	{
			die('Erreur : ' . $e->getMessage());
	}
} // fin if
else{	
?>
<!doctype html>
<?php }?>
       
        

La page (pagination.php)

Copier ce code dans une page que vous nommerez (pagination.php).

            <?php
            function paginate($reload, $page, $tpages, $adjacents) {
                $prevlabel = "‹ Précédent";
                $nextlabel = "Suivant ›";
                $out = '<div class="pagin">';
            
                // previous label
            
                if($page==1) {
                    $out.= "<span>$prevlabel</span>";
                } else if($page==2) {
                    $out.= "<a href='javascript:void(0);' onclick='load(1)'>$prevlabel</a>";
                }else {
                    $out.= "<a href='javascript:void(0);' onclick='load(".($page-1).")'>$prevlabel</a>";
            
                }
                
                // first label
                if($page>($adjacents+1)) {
                    $out.= "<a href='javascript:void(0);' onclick='load(1)'>1</a>";
                }
                // interval
                if($page>($adjacents+2)) {
                    $out.= "...\n";
                }
            
                // pages
                $pmin = ($page>$adjacents) ? ($page-$adjacents) : 1;
                $pmax = ($page<($tpages-$adjacents)) ? ($page+$adjacents) : $tpages;
                for($i=$pmin; $i<=$pmax; $i++) {
                    if($i==$page) {
                        $out.= "<span class='current'>$i</span>";
                    }else if($i==1) {
                        $out.= "<a href='javascript:void(0);' onclick='load(1)'>$i</a>";
                    }else {
                        $out.= "<a href='javascript:void(0);' onclick='load(".$i.")'>$i</a>";
                    }
                }
            
                // interval
                if($page<($tpages-$adjacents-1)) {
                    $out.= "...\n";
                }
            
                // last
                if($page<($tpages-$adjacents)) {
                    $out.= "<a href='javascript:void(0);' onclick='load($tpages)'>$tpages</a>";
                }
            
                // next
                if($page<$tpages) {
                    $out.= "<a href='javascript:void(0);' onclick='load(".($page+1).")'>$nextlabel</a>";
                }else {
                    $out.= "<span>$nextlabel</span>";
                }
                //echo 'Page '. $page .' sur '. $pmax;
                $out.= "</div>";
                return $out;
            }
            ?>
		

Code Html

Copier ce code dans la partie body.

          <div id="loaders"><img src="images/loader.gif"></div>		
          <div class="outer_div"></div> 
       

Code JavaScript

La fonction Javascript relative au nom de la page et au bloc div. Bien sûr la librairie JQuery est requise, via CDN ou locale.

            <script>
            $(document).ready(function(){ load(1); });
            function load(a){$("#loaders").fadeIn("slow");$.ajax({url:"index_pagination1.php?action=ajax&page="+a,success:function(b){$(".outer_div").html(b).fadeIn("slow");$("#loaders").fadeOut("slow")}})};
            </script>
       

Code CSS

Code CSS à personnaliser selon votre design et à adapter.

          .pagin{padding:10px 0;font:bold 11px/30px arial, serif;width:650px;}
          .pagin * {padding:2px 6px;color:#666;margin:2px;border-radius:3px;}
          .pagin a {border:solid 1px #CCC;text-decoration:none;background:#F8FCFF;padding:6px 7px 5px;}
          .pagin span, .pagin a:hover, .pagin a:active, .pagin span.current{color:#fff;background:-moz-linear-gradient(top,#E2E2E2 1px,#e1e1e1 1px,#B7B7B7);}
          .pagin span, .current{padding:8px 7px 7px;}
          .outer_div{margin:auto;width:100%;}
          #loaders{position:absolute;text-align:center;top:490px;right:40px;width:100%;display:none;}