Paginacion con PHP

Paginador. Podemos mostrar un subconjunto de cosas y permitirle al usuario navegar entre ellos de forma cómoda y simple. El no utilizar paginación, puede llevar a mostrar un conjunto extremadamente grande de datos, como así también congestionar la base de datos y la red. Crearemos una tabla llamada «artículos», que posee tres columnas: id, titulo y cuerpo.

Para poder mostrar una lista de páginas por las cuales el usuario puede navegar, necesitamos conocer 3 cosas:

La página actual en la que se encuentra el usuario
El número total de artículos en la base de datos
El número de artículos por página que vamos a mostrar

Definiremos cómo vamos a mostrar la paginación. Existen varios formatos, de los cuales tenemos que elegir uno:

Mostrar botones «Atrás / Adelante» o «Antiguos / Más nuevos»
Una lista con todas las páginas que existen
Una lista que muestra la página actual, un par de páginas previas y posteriores, la primera y la última

En este articulo, optaremos por la tercer opción.

La conexión con la base de datos la vamos a realizar con el archivo que creamos en el artículo «Cargar combos en cascada con jQuery, PHP y MySQL», con el cual hacemos una consulta para obtener cuántos artículos hay en la base de datos.

$sql = "SELECT COUNT(*) AS total
        FROM articulos"; 
$db = obtenerConexion();
$resultado = ejecutarQuery($db, $sql);
$fila = $resultado->fetch_assoc();
$articulosTotales = $fila['total'];
cerrarConexion($db, $resultado);

$sql = "SELECT COUNT(*) AS total

FROM articulos";

$db = obtenerConexion();

$resultado = ejecutarQuery($db, $sql);

$fila = $resultado->fetch_assoc();

$articulosTotales = $fila['total'];

cerrarConexion($db, $resultado);

Buscamos cuántas páginas hay en total.

$articulosPorPagina = 2;
$paginasTotales = ceil($articulosTotales / $articulosPorPagina);

1 2	$articulosPorPagina = 2; $paginasTotales = ceil($articulosTotales / $articulosPorPagina);

Cuando pulsemos uno de los enlaces de la página, lo que se hace es llamar al mismo archivo, pasándole por GET el id de la página. Por tanto, tenemos que saber cuál es el id que está llegando por GET.

$paginaActual = 0;
if(isset($_GET['pagina'])){

    // en caso que haya datos, los casteamos a int
    $paginaActual = (int)$_GET['pagina'];
}

// el número de la página actual no puede ser menor a 0
if($paginaActual < 1){
    $paginaActual = 1;
}
else if($paginaActual > $paginasTotales){ // tampoco mayor la cantidad de páginas totales
    $paginaActual = $paginasTotales;
}

$paginaActual = 0;

if(isset($_GET['pagina'])){

// en caso que haya datos, los casteamos a int

$paginaActual = (int)$_GET['pagina'];

}

// el número de la página actual no puede ser menor a 0

if($paginaActual < 1){

$paginaActual = 1;

}

else if($paginaActual > $paginasTotales){ // tampoco mayor la cantidad de páginas totales

$paginaActual = $paginasTotales;

}

Obtenemos los artículos a mostrar en la página.

// obtenemos cuál es el artículo inicial para la consulta
$articuloInicial = ($paginaActual - 1) * $articulosPorPagina;

// buscamos en la base de datos todos los artículos que correspondan a la página
// la sentencia LIMIT hace que se limite la cantidad de registros devueltos
// hay que indicarle el dato inicial y la cantidad de registros que debe devolver
$sql2 = 'SELECT `titulo`, `cuerpo` 
        FROM `articulos` 
        ORDER BY `id`
        LIMIT ' . $articuloInicial . ', ' . $articulosPorPagina;

$db = obtenerConexion();
$articulos = ejecutarQuery($db, $sql2);

// obtenemos cuál es el artículo inicial para la consulta

$articuloInicial = ($paginaActual - 1) * $articulosPorPagina;

// buscamos en la base de datos todos los artículos que correspondan a la página

// la sentencia LIMIT hace que se limite la cantidad de registros devueltos

// hay que indicarle el dato inicial y la cantidad de registros que debe devolver

$sql2 = 'SELECT `titulo`, `cuerpo`

FROM `articulos`

ORDER BY `id`

LIMIT ' . $articuloInicial . ', ' . $articulosPorPagina;

$db = obtenerConexion();

$articulos = ejecutarQuery($db, $sql2);

Definimos nuestra página.

<!doctype html>
<html lang="es">
    <head>
        <meta charset="UTF-8">
        <title>Tuweb - Paginación</title>
    </head>
    <link rel="stylesheet" href="styles.css">
    <body>
        <div class="contenedor">
            <?php   

                // mostramos los artículos de la página
                while($fila = $articulos->fetch_assoc()){
                    echo '<div><h2>' . $fila['titulo'] . '</h2></div>';
                    echo '<div>' . $fila['cuerpo'] . '</div>';
                }
                cerrarConexion($db, $articulos);

                echo '<div class="paginacion">';

                // mostramos la paginación
                for ($i=1; $i <= $paginasTotales; $i++) { 

                    // para identificar la página actual, le agregamos una clase
                    // para darle un estilo diferente 
                    if($i == $paginaActual){
                        echo '<span class="pagina actual">' . $i . '</span>';
                    }
                    // sólo vamos a mostrar los enlaces de la primer página,
                    // las dos siguientes, las dos anteriores
                    // y la última
                    else if($i == 1 || $i == $paginasTotales || ($i >= $paginaActual - 2 && $i <= $paginaActual + 2)){
                        echo '<a href="?pagina=' . $i . '" class="pagina">' . $i . '</a>';
                    }
                }
                echo '</div>'
            ?>
            <div id="tuweb">
              Tu pagina web <a href="http://www.tuweb.com">www.tuweb.com</a> 
            </div>
        </div>

    </body>
</html>

<!doctype html>

<head>

<title>Tuweb - Paginación</title>

</head>

<body>

<?php

// mostramos los artículos de la página

while($fila = $articulos->fetch_assoc()){

echo '<div><h2>' . $fila['titulo'] . '</h2></div>';

echo '<div>' . $fila['cuerpo'] . '</div>';

}

cerrarConexion($db, $articulos);

echo '<div class="paginacion">';

// mostramos la paginación

for ($i=1; $i <= $paginasTotales; $i++) {

// para identificar la página actual, le agregamos una clase

// para darle un estilo diferente

if($i == $paginaActual){

echo '<span class="pagina actual">' . $i . '</span>';

}

// sólo vamos a mostrar los enlaces de la primer página,

// las dos siguientes, las dos anteriores

// y la última

else if($i == 1 || $i == $paginasTotales || ($i >= $paginaActual - 2 && $i <= $paginaActual + 2)){

echo '<a href="?pagina=' . $i . '" class="pagina">' . $i . '</a>';

}

echo '</div>'

Tu pagina web <a href="http://www.tuweb.com">www.tuweb.com</a>

</div>

</body>

</html>

Aplicamos un estilo a la paginación.

1	Aplicamos un estilo a la paginación.

.pagina {
    padding: 0px 9px;
    margin-right: 4px;
    border-radius: 3px;
    border: solid 1px #c0c0c0;
    background: #e9e9e9;
    box-shadow: inset 0px 1px 0px rgba(255,255,255, .8), 0px 1px 3px rgba(0,0,0, .1);
    font-size: .875em;
    font-weight: bold;
    text-decoration: none;
    color: #717171;
    text-shadow: 0px 1px 0px rgba(255,255,255, 1);
}

.pagina:hover, .pagina.gradient:hover {
    background: #fefefe;
    background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#FEFEFE), to(#f0f0f0));
    background: -moz-linear-gradient(0% 0% 270deg,#FEFEFE, #f0f0f0);
}

.pagina.actual {
    border: none;
    background: #616161;
    box-shadow: inset 0px 0px 8px rgba(0,0,0, .5), 0px 1px 0px rgba(255,255,255, .8);
    color: #f0f0f0;
    text-shadow: 0px 0px 3px rgba(0,0,0, .5);
}

.pagina {

padding: 0px 9px;

margin-right: 4px;

border-radius: 3px;

border: solid 1px #c0c0c0;

background: #e9e9e9;

box-shadow: inset 0px 1px 0px rgba(255,255,255, .8), 0px 1px 3px rgba(0,0,0, .1);

font-size: .875em;

font-weight: bold;

text-decoration: none;

color: #717171;

text-shadow: 0px 1px 0px rgba(255,255,255, 1);

}

.pagina:hover, .pagina.gradient:hover {

background: #fefefe;

background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#FEFEFE), to(#f0f0f0));

background: -moz-linear-gradient(0% 0% 270deg,#FEFEFE, #f0f0f0);

}

.pagina.actual {

border: none;

background: #616161;

box-shadow: inset 0px 0px 8px rgba(0,0,0, .5), 0px 1px 0px rgba(255,255,255, .8);

color: #f0f0f0;

text-shadow: 0px 0px 3px rgba(0,0,0, .5);

}

Paginacion con PHP

Agregar comentario

Cancelar respuesta