Desarrollo de una paginación avanzada en PHP y MySQL con jQuery

Ya hemos hablado en otras ocasiones de las típicas paginaciones de PHP. Hay varios artículos en programacion.net en los que se aborda el tema y te indicamos cómo llevarlos a cabo en distintos lenguajes de programación, incluso en PHP. Pero hoy hablaremos de un tipo de paginación diferente por el cual, muchos de vosotros me habéis preguntado. Hoy nos meteremos de lleno en la paginación avanzada, esa cuya característica más distintiva son los tres puntos (…).

Veremos cómo introducir esos tres puntos entre la paginación numérica y lo desarrollaremos todo con jQuery y con la ayuda de PHP y MySQL.

Diseño de base de datos y tabla

Nombre de la base de datos: progbd
Nombre de la tabla: pagination
Nombres de las columnas: id, post, postlink

db.sql

Archivo de base de datos. Ejecútalo en tu gestor de base de datos para crear la base de datos y añadir contenido en la tabla.

create database `progbd`;
use `progbd`;
CREATE TABLE `pagination` (
  `id` int(11) NOT NULL auto_increment,
  `post` varchar(250) NOT NULL,
  `postlink` varchar(250) NOT NULL,
  PRIMARY KEY  (`id`)
) ENGINE=MyISAM AUTO_INCREMENT=48 DEFAULT CHARSET=latin1 AUTO_INCREMENT=48 ;

INSERT INTO `pagination` VALUES (1, 'Edición inline HTML5 con PHP, MySQL y AJAX', 'http://programacion.net/articulo/edicion_inline_html5_con_php-_mysql_y_ajax_1560');
INSERT INTO `pagination` VALUES (2, 'Los 6 mejores generadores de código CSS', 'http://programacion.net/articulo/los_6_mejores_generadores_de_codigo_css_1559');
INSERT INTO `pagination` VALUES (3, 'Cortar y redimensionar imágenes utilizando PHP, jQuery y AJAX', 'http://programacion.net/articulo/cortar_y_redimensionar_imagenes_utilizando_php-_jquery_y_ajax_1558');
INSERT INTO `pagination` VALUES (4, 'Formulario con múltiples pasos utilizando PHP, Bootstrap y jQuery', 'http://programacion.net/articulo/formulario_con_multiples_pasos_utilizando_php-_bootstrap_y_jquery_1557');
INSERT INTO `pagination` VALUES (5, 'Cómo implementar una jTable con PHP y MySQL', 'http://programacion.net/articulo/como_implementar_una_jtable_con_php_y_mysql_1556');
INSERT INTO `pagination` VALUES (6, 'Publicar en una página de Facebook utilizando la Graph API con PHP', 'http://programacion.net/articulo/publicar_en_una_pagina_de_facebook_utilizando_la_graph_api_con_php_1555');

db.php

Archivo de configuración de la base de datos en el que, también, haremos la conexión.

<?php
$connection = mysqli_connect('localhost','proguser','******','progbd') or die(mysqli_error($connection));
?>

style.css

Contiene los estilos de los números de la paginación, así como del next y del previous

div.pagination {
padding: 3px;
margin: 3px;
text-align:center;
}
 
div.pagination a {
padding: 2px 5px 2px 5px;
margin: 2px;
border: 1px solid #AAAADD;
 
text-decoration: none; /* no underline */
color: #000099;
}
div.pagination a:hover, div.digg a:active {
border: 1px solid #000099;
 
color: #000;
}
div.pagination span.current {
padding: 2px 5px 2px 5px;
margin: 2px;
border: 1px solid #000099;
 
font-weight: bold;
background-color: #000099;
color: #FFF;
}
div.pagination span.disabled {
padding: 2px 5px 2px 5px;
margin: 2px;
border: 1px solid #EEE;
 
color: #DDD;
}

Necesitamos jQuery para manejar las funciones AJAX:

<script type="text/javascript" src="jquery-1.8.0.min.js"></script>
<script type="text/javascript">
function changePagination(pageId){
$(".flash").show();
$(".flash").fadeIn(400).html
('Loading <img src="ajax-loader.gif" />');
var dataString = 'pageId='+ pageId;
$.ajax({
type: "POST",
url: "loadData.php",
data: dataString,
cache: false,
success: function(result){
$(".flash").hide();
$("#pageData").html(result);
}
});
}
</script>

loadData.php

Este fichero contiene la lógica de la paginación.

<?php
include_once('db.php');

$query="select id from pagination order by id asc";
$res = mysqli_query($connection,$query);
$count = mysqli_num_rows($res);
$page = (int) (!isset($_REQUEST['pageId']) ? 1 :$_REQUEST['pageId']);
$page = ($page == 0 ? 1 : $page);
$recordsPerPage = 5;
$start = ($page-1) * $recordsPerPage;
$adjacents = "2";

$prev = $page - 1;
$next = $page + 1;
$lastpage = ceil($count/$recordsPerPage);
$lpm1 = $lastpage - 1;
$pagination = "";
if($lastpage > 1)
{
$pagination .= "<div class='pagination'>";
if ($page > 1)
$pagination.= "<a href="#Page=".($prev)."" onClick='changePagination(".($prev).");'>&laquo; Previous&nbsp;&nbsp;</a>";
else
$pagination.= "<span class='disabled'>&laquo; Previous&nbsp;&nbsp;</span>";
if ($lastpage < 7 + ($adjacents * 2))
{
for ($counter = 1; $counter <= $lastpage; $counter++)
{
if ($counter == $page)
$pagination.= "<span class='current'>$counter</span>";
else
$pagination.= "<a href="#Page=".($counter)."" onClick='changePagination(".($counter).");'>$counter</a>";

}
}

elseif($lastpage > 5 + ($adjacents * 2))
{
if($page < 1 + ($adjacents * 2))
{
for($counter = 1; $counter < 4 + ($adjacents * 2); $counter++)
{
if($counter == $page)
$pagination.= "<span class='current'>$counter</span>";
else
$pagination.= "<a href="#Page=".($counter)."" onClick='changePagination(".($counter).");'>$counter</a>";
}
$pagination.= "...";
$pagination.= "<a href="#Page=".($lpm1)."" onClick='changePagination(".($lpm1).");'>$lpm1</a>";
$pagination.= "<a href="#Page=".($lastpage)."" onClick='changePagination(".($lastpage).");'>$lastpage</a>";

}
elseif($lastpage - ($adjacents * 2) > $page && $page > ($adjacents * 2))
{
$pagination.= "<a href="#Page="1"" onClick='changePagination(1);'>1</a>";
$pagination.= "<a href="#Page="2"" onClick='changePagination(2);'>2</a>";
$pagination.= "...";
for($counter = $page - $adjacents; $counter <= $page + $adjacents; $counter++)
{
if($counter == $page)
$pagination.= "<span class='current'>$counter</span>";
else
$pagination.= "<a href="#Page=".($counter)."" onClick='changePagination(".($counter).");'>$counter</a>";
}
$pagination.= "..";
$pagination.= "<a href="#Page=".($lpm1)."" onClick='changePagination(".($lpm1).");'>$lpm1</a>";
$pagination.= "<a href="#Page=".($lastpage)."" onClick='changePagination(".($lastpage).");'>$lastpage</a>";
}
else
{
$pagination.= "<a href="#Page="1"" onClick='changePagination(1);'>1</a>";
$pagination.= "<a href="#Page="2"" onClick='changePagination(2);'>2</a>";
$pagination.= "..";
for($counter = $lastpage - (2 + ($adjacents * 2)); $counter <= $lastpage; $counter++)
{
if($counter == $page)
$pagination.= "<span class='current'>$counter</span>";
else
$pagination.= "<a href="#Page=".($counter)."" onClick='changePagination(".($counter).");'>$counter</a>";
}
}
}
if($page < $counter - 1)
$pagination.= "<a href="#Page=".($next)."" onClick='changePagination(".($next).");'>Next &raquo;</a>";
else
$pagination.= "<span class='disabled'>Next &raquo;</span>";

$pagination.= "</div>";
}

if(isset($_POST['pageId']) && !empty($_POST['pageId']))
{
$id=$_POST['pageId'];
}
else
{
$id='0';
}
$query="select post,postlink from pagination order by id asc
limit ".mysqli_real_escape_string($connection,$start).",$recordsPerPage";
//echo $query;
$res = mysqli_query($connection,$query);
$count = mysqli_num_rows($res);
$HTML='';
if($count > 0)
{
while($row=mysqli_fetch_array($res))
{
$post=$row['post'];
$link=$row['postlink'];
$HTML.='<div>';
$HTML.='<a href="'.$link.'" target="_blank">'.$post.'</a>';
$HTML.='</div><br/>';
}
}
else
{
$HTML='No Data Found';
}
echo $HTML;
echo $pagination;
?>

A través de una solicitud vía AJAX se enviará la información a este archivo PHP y se devolverán los resultados paginados.

Esta línea de código devuelve todos los registros de la tabla y los recuenta.

$query="select id from pagination order by id asc";
$res=mysql_query($query);
$count=mysql_num_rows($res);

Mostrará 5 registros por cada página. Siempre puedes incremente o decrecer este número de registros modificando este valor ($start = ($page-1) * 5;) al número que quieras.

index.php

Este sería el código completo de nuestro archivo index, con todos los códigos js y css incluidos.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>How to create pagination in PHP and MySQL with AJAX | Programacion.net</title>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<script type="text/javascript" src="jquery-1.8.0.min.js"></script>
<style>
div.pagination {
padding: 3px;
margin: 3px;
text-align:center;
}

div.pagination a {
padding: 2px 5px 2px 5px;
margin: 2px;
border: 1px solid #AAAADD;

text-decoration: none; /* no underline */
color: #000099;
}
div.pagination a:hover, div.digg a:active {
border: 1px solid #000099;

color: #000;
}
div.pagination span.current {
padding: 2px 5px 2px 5px;
margin: 2px;
border: 1px solid #000099;

font-weight: bold;
background-color: #000099;
color: #FFF;
}
div.pagination span.disabled {
padding: 2px 5px 2px 5px;
margin: 2px;
border: 1px solid #EEE;

color: #DDD;
}

</style>

<script type="text/javascript">
$(document).ready(function(){
changePagination('0');
});
function changePagination(pageId){
$(".flash").show();
$(".flash").fadeIn(400).html
('Loading <img src="ajax-loader.gif" />');
var dataString = 'pageId='+ pageId;
$.ajax({
type: "POST",
url: "loadData.php",
data: dataString,
cache: false,
success: function(result){
$(".flash").hide();
$("#pageData").html(result);
}
});
}
</script>
</head>
<body>

<div id="pageData"></div>
<span class="flash"></span>

</body>
</html>

Fuente: phpgang.com

COMPARTE ESTE ARTÍCULO

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