Paginación con jQuery Ajax, PHP y MySQL

En todo proyecto web que se precie, la paginación juega un papel fundamental puesto que nos permite listar un gran número de registros extraídos de la base de datos. Para ello, paginar con Ajax es una opción a considerar ya que mejorará muy mucho la experiencia del usuario al no tener que recargar la web cada vez que cambie de página. En este tutorial te mostraré como implementar una paginación Ajax en PHP utilizando jQuery y MySQL.

Mediante PHP, mostraremos los posts de la base de datos junto a sus enlaces para paginar. A través de estos enlaces, obtendremos los registros de la base de datos sin contar con los que estamos mostrando. Jquery y Ajax nos ayudarán a extraer los registros de la base de datos dependiendo de los enlaces de paginación pulsados, sin recargar la página.

Antes de empezar con el tutorial, vamos a echar un vistazo a la estructura de ficheros que vamos a utilizar:

  • Pagination.php
  • dbConfig.php
  • getData.php
  • index.php
  • jquery.min.js
  • style.css

Creación de la base de datos

En nuestra base de datos tendremos la tabla posts, de la cual extraeremos los registros que queremos paginar. El SQL de la tabla posts que utilizaremos en este tutorial es tal que así:

CREATE TABLE `posts` (
 `id` int(11) NOT NULL AUTO_INCREMENT,
 `title` varchar(255) COLLATE utf8_unicode_ci NOT NULL,
 `content` text COLLATE utf8_unicode_ci NOT NULL,
 `created` datetime NOT NULL,
 `modified` datetime NOT NULL,
 `status` tinyint(1) NOT NULL DEFAULT '1' COMMENT '1=Active, 0=Inactive',
 PRIMARY KEY (`id`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8 COLLATE=utf8_unicode_ci;

Clase Pagination

Hemos creado una clase llamada Pagination para generar los enlaces de la paginación. La clase cuenta con algunos parámetros para configurar los distintos enlaces. Las opciones más comunes son las que te listamos a continuación:

  • baseURL: Contendrá la URL donde realizaremos la petición Ajax y desde la cula obtendremos los registros de posts y sus respectivos enlaces de paginación
  • totalRows: Número total de registros
  • perPage: Numero de registros por página
  • contentDiv: ID del contenedor donde se va a mostrar el paginador.

Para utilizar la clase Pagination, podríamos hacerlo de este modo:

<?php
// Pagination links configuration
$pagConfig = array('baseURL'=>'getData.php', 'totalRows'=>$rowCount, 'perPage'=>$limit, 'contentDiv'=>'posts_content');
// Initialize pagination class
$pagination =  new Pagination($pagConfig);
?>


<!-- Display pagination links -->
<?php echo $pagination->createLinks(); ?>

dbConfig.php

Este archivo nos ayudará a conectarnos con la base de datos.

<?php
$dbHost = "localhost";
$dbUsername = "root";
$dbPassword = "";
$dbName = "noprog";

// Create database connection
$db = new mysqli($dbHost, $dbUsername, $dbPassword, $dbName);

// Check connection
if ($db->connect_error) {
    die("Connection failed: " . $db->connect_error);
}
?>

index.php

Este archivo contendrá algo de Javascript, PHP y código HTML.

Javascript

Incluimos la librería jQuery para que podamos trabajar con jQuery y Ajax. Además, también la necesitamos para mostrar un overlay cada vez que se realice la petición Ajax.

<script src="jquery.min.js"></script>
<script type="text/javascript">
// Show loading overlay when ajax request starts
$( document ).ajaxStart(function() {
    $('.loading-overlay').show();
});
// Hide loading overlay when ajax request completes
$( document ).ajaxStop(function() {
    $('.loading-overlay').hide();
});
</script>

PHP y HTML

Primero, tenemos que mostrar un número limitado de posts junto a los enlaces de paginación. Para mostrar los enlaces de paginación, debes crear un objeto de la clase Pagination. Como he mencionado antes, debes pasarle los parámetros a la clase según tus necesidades. Llama a la función createLinks() de la clase Pagination para mostrar los enlaces de paginación.

<div class="post-wrapper">
    <div class="loading-overlay"><div class="overlay-content">Loading.....</div></div>
    <div id="posts_content">
    <?php
    //Include Pagination class file
    include('Pagination.php');
    
    //Include database configuration file
    include('dbConfig.php');
    
    $limit = 10;
    
    //Get the total number of rows
    $queryNum = $db->query("SELECT COUNT(*) as postNum FROM posts");
    $resultNum = $queryNum->fetch_assoc();
    $rowCount = $resultNum['postNum'];
    
    //Initialize Pagination class and create object
    $pagConfig = array('baseURL'=>'getData.php', 'totalRows'=>$rowCount, 'perPage'=>$limit, 'contentDiv'=>'posts_content');
    $pagination =  new Pagination($pagConfig);
    
    //Get rows

    $query = $db->query("SELECT * FROM posts RDER BY id DESC LIMIT $limit");
    
    if($rowCount > 0){ ?>
        <div class="posts_list">
        <?php
            while($row = $query->fetch_assoc()){ 
                $postID = $row['id'];
        ?>
            <div class="list_item"><a href="javascript:void(0);"><h2><?php echo $row["title"]; ?></h2></a></div>
        <?php } ?>

        </div>
        <?php echo $pagination->createLinks(); ?>
    <?php } ?>
    </div>
</div>

getData.php

A este fichero accederemos vía Ajax. Obtendremos el número de página del enlace de paginación y enviaremos los respectivos registros de acuerdo a dichos parámetros.

<?php
if(isset($_POST['page'])){
    //Include Pagination class file
    include('Pagination.php');
    
    //Include database configuration file
    include('dbConfig.php');
    
    $start = !empty($_POST['page'])?$_POST['page']:0;
    $limit = 10;
    
    //get number of rows
    $queryNum = $db->query("SELECT COUNT(*) as postNum FROM posts");
    $resultNum = $queryNum->fetch_assoc();
    $rowCount = $resultNum['postNum'];
    
    //initialize Pagination class
    $pagConfig = array('baseURL'=>'getData.php', 'totalRows'=>$rowCount, 'currentPage'=>$start, 'perPage'=>$limit, 'contentDiv'=>'posts_content');
    $pagination =  new Pagination($pagConfig);
    
    //get rows
    $query = $db->query("SELECT * FROM posts ORDER BY id DESC LIMIT $start,$limit");
    
    if($rowCount > 0){ ?>
        <div class="posts_list">
        <?php
            while($row = $query->fetch_assoc()){ 
                $postID = $row['id'];
        ?>
            <div class="list_item"><a href="javascript:void(0);"><h2><?php echo $row["title"]; ?></h2></a></div>
        <?php } ?>

        </div>
        <?php echo $pagination->createLinks(); ?>
<?php }
}
?>

style.css

Para que nuestros enlaces luzcan bien, utilizaremos el siguiente CSS. Te recomiendo que personalices este código, de acuerdo al diseño de tu web.

div.pagination {
    font-family: "Lucida Sans", Geneva, Verdana, sans-serif;
    padding:20px;
    margin:7px;
}

div.pagination a {
    margin: 2px;
    padding: 0.5em 0.64em 0.43em 0.64em;
    background-color: #ee4e4e;
    text-decoration: none;
    color: #fff;
}
div.pagination a:hover, div.pagination a:active {
    padding: 0.5em 0.64em 0.43em 0.64em;
    margin: 2px;
    background-color: #de1818;
    color: #fff;
}
div.pagination span.current {
    padding: 0.5em 0.64em 0.43em 0.64em;
    margin: 2px;
    background-color: #f6efcc;
    color: #6d643c;
}
div.pagination span.disabled {
    display:none;
}

Fuente: codexworld.com

COMPARTE ESTE ARTÍCULO

COMPARTIR EN FACEBOOK
COMPARTIR EN TWITTER
COMPARTIR EN LINKEDIN
COMPARTIR EN WHATSAPP