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