Creando un script de paginación utilizando PHP PDO con jQuery

Este tutorial cubrirá la tarea de crear un script simple de paginación utilizando PHP MySQL con jQuery. Para ello también utilizaré bootpag, un plugin de jQuery para implementar una paginación dinámica. Este plugin es muy sencillo de usar, así que no te preocupes si no eres muy ducho en Javascript y en lenguaje front-end.

Cuando tenemos un gran número de registros en una tabla MySQL, y los queremos mostrar por pantalla, lo suyo es paginarlos. Para este tutorial utilizaré jQuery que hace que desarrollar una paginación sea pan comido. ¿Estás listo para llevarlo a cabo en tus propios proyectos? ¿Quieres una paginación profesional en tu sitio web? Pues no lo dudes, y atiende a este sencillo tutorial.

Antes decirte que para desarrollar este tutorial solo necesitaremos crear tres ficheros. En total, estos serán los ficheros que utilizaremos:

Base de datos

Copia y pega el siguiente script de SQL dentro de la base de datos de prueba que hayas creado previamente. Para ello utiliza un gestor de base de datos como PHPMyAdmin, por ejemplo. 

CREATE TABLE IF NOT EXISTS `tutorials` (
  `tutsID` int(11) unsigned NOT NULL AUTO_INCREMENT,
  `tutsTitle` varchar(100) NOT NULL,
  `tutsLink` varchar(100) NOT NULL,
  PRIMARY KEY (`tutsID`),
  FULLTEXT KEY `tutsTitle` (`tutsTitle`)
) ENGINE=MyISAM  DEFAULT CHARSET=latin1 AUTO_INCREMENT=57 ;

Dbconfig.php

Fichero que establecerá la conexión con la base de datos a través de la extensión PDO. Cambia las credenciales con las tuyas propias. 

$db_username = 'root';
 $db_password = '';
 $db_name = 'db_pagination';
 $db_host = 'localhost';
 $item_per_page = 7;
 
 
 try
 {
  $dbcon = new PDO("mysql:host={$db_host};dbname={$db_name}",$db_username,$db_password);
  $dbcon->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
 }
 catch(PDOException $e)
 {
  echo $e->getMessage();
 }

Obteniendo el número total de páginas

Utiliza el siguiente código para obtener el número total de páginas. A la función ceil(), la cual se encarga de redondear a la alza, le paso la división entre el número total de registros de la tabla, y el número de registros que quiero que aparezcan en pantalla. 

$results = $dbcon->prepare("SELECT COUNT(*) FROM tutorials");
$results->execute();
$get_total_rows = $results->fetch();

//breaking total records into pages
$pages = ceil($get_total_rows[0]/$item_per_page);

Código Javascript

Para ejecutar el siguiente código jQuery, necesitamos añadir el plugin jquery.bootpag.min.js dentro del tag head. Una vez tenemos el número de páginas del script anterior, lo asignamos a la variable $pages. Ahora, como puedes ver en el siguiente script, se lo pasamos a la variable de javascript total, tal que así: 

$(document).ready(function() {
 $("#results").load("get_records.php");  //initial page number to load
 $(".paging_link").bootpag({
    total: <?php echo $pages; ?>
 }).on("page", function(e, num){
  e.preventDefault();
  $("#results").prepend('<div class="loading-indication"><img src="ajax-loader.gif" /> Loading...</div>');
  $("#results").load("get_records.php", {'page':num});
 });

});

Código completo de index.php

Este archivo contiene el código completo que he explicado anteriormente. Si te fijas, los resultados extraidos de la tabla tutorials de la base de datos se mostrarán en el div con clase results. Existe otro div a destacar. Ese es que contiene la clase paging_link que contendrá los enlaces a las distintas páginas de la paginación. 

<?php
include("dbconfig.php");

$results = $dbcon->prepare("SELECT COUNT(*) FROM tutorials");
$results->execute();
$get_total_rows = $results->fetch();

//breaking total records into pages
$pages = ceil($get_total_rows[0]/$item_per_page); 


?>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Paginacion jQuery :: Programacion.net</title>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>     

<script type="text/javascript" src="js/jquery.bootpag.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
 $("#results").load("get_records.php");  //initial page number to load
 $(".paging_link").bootpag({
    total: <?php echo $pages; ?>
 }).on("page", function(e, num){
  e.preventDefault();
  $("#results").prepend('<div class="loading-indication"><img src="ajax-loader.gif" /> Loading...</div>');
  $("#results").load("get_records.php", {'page':num});
 });

});
</script>
<link href="css/style.css" rel="stylesheet" type="text/css">
</head>
<body>
        

<br />


<div id="results"></div>

<br />

<div class="paging_link"></div>

</body>
</html>

Get_records.php

Contiene el código principal que extraerá los registros de la base de datos MySQL mediante un registro inicial y los elementos por página que queramos mostrar. 

<?php
require_once 'dbconfig.php'; //include required dbconfig file

//sanitize post value
if(isset($_POST["page"])){
 $page_number = filter_var($_POST["page"], FILTER_SANITIZE_NUMBER_INT, FILTER_FLAG_STRIP_HIGH);
 if(!is_numeric($page_number)){die('Invalid page number!');} //incase of invalid page number
}else{
 $page_number = 1;
}

//get current starting point of records
$position = (($page_number-1) * $item_per_page);

$results = $dbcon->prepare("SELECT tutsTitle,tutsLink FROM tutorials ORDER BY tutsID DESC LIMIT $position, $item_per_page");
$results->execute();

//getting results from database
?>
<ul class="page_result">
<?php
while($row = $results->fetch(PDO::FETCH_ASSOC))
{
 ?>
    <li>
    <a href="<?php echo $row['tutsLink']; ?>"><?php echo $row['tutsTitle']; ?></a>
    </li>
    <?php
}
?>
</ul>

Fuente: codingcage.com

COMPARTE ESTE ARTÍCULO

COMPARTIR EN FACEBOOK
COMPARTIR EN TWITTER
COMPARTIR EN LINKEDIN
COMPARTIR EN WHATSAPP
ARTÍCULO ANTERIOR

SIGUIENTE ARTÍCULO