Al final me ha quedado así:
Para hacer una paginación sencilla con html, php y mysql PDO, a mi me ha quedado así:
index.php
Código PHP:
<?php
try{
$conexion = new PDO('mysql:host=localhost;dbname=curso_php_mysql', 'root', '');
}catch(PDOException $e){
echo "Error: " . $e->getMessage();
die();
}
// Esto es lo mismo que hacer un 'if' 'else' -- si 'no se pone if si no la condicion' entonces '?' si no ':'
$pagina = isset($_GET['pagina']) ? (int)$_GET['pagina'] : 1 ;
// Post por cada pagina
$PostPorPagina = 5;
$inicio = ($pagina > 1) ? ($pagina * $PostPorPagina - $PostPorPagina) : 0;
// SQL_CALC_FOUND_ROWS nos calcula cuantas filas hay en la tabla
$articulos = $conexion->prepare("SELECT SQL_CALC_FOUND_ROWS * FROM articulos LIMIT $inicio, $PostPorPagina");
// Ejecutamos la consulta
$articulos->execute();
$articulos = $articulos->fetchAll();
// Ver si hay articulos para una $pagina, si no reenviar al index.php
if(!$articulos){
header('location: index.php');
}
// Calculamos el numero total de articulos
$TotalArticulos = $conexion->query('SELECT FOUND_ROWS() as total');
$TotalArticulos = $TotalArticulos->fetch();
$TotalArticulos = $TotalArticulos['total'];
// Redondeamos al alza o valor superior con ceil()
$NumeroPaginas = ceil($TotalArticulos / $PostPorPagina);
require('index.view.php');
// Cerramos la conexion a la base de datos si no vamos a trabajar más con ellla
$articulos = null;
$conexion = null;
?>
index.view.php
Código PHP:
<!doctype html>
<html lang="es">
<head>
<meta charset="utf-8">
<title>Paginacion</title>
<link href="https://fonts.googleapis.com/css?family=Oswald" rel="stylesheet" type="text/css">
<link href="styles.css" rel="stylesheet" type="text/css">
</head>
<body>
<div class="contenedor">
<h1>Artículos</h1>
<section class="articulos">
<ul>
<?php foreach($articulos as $fila): ?>
<li><?php echo $fila['id'] . '.- ' . $fila['articulo'] ?></li>
<?php endforeach; ?>
</ul>
</section>
<section class="paginacion">
<ul>
<!-- Establecemos cuando el boton anterior esta desabilitado -->
<?php if($pagina == 1): ?>
<li class="desable">«</li>
<?php else: ?>
<li><a href="?pagina=<?php echo $pagina - 1 ?>">«</a></li>
<?php endif; ?>
<!-- Ejecutamos un ciclo para mostrar las paginas -->
<?php
for ($i = 1; $i <= $NumeroPaginas; $i++){
if($pagina == $i){
echo "<li class='active'><a href='?pagina=$i'>$i</a></li>";
}else{
echo "<li><a href='?pagina=$i'>$i</a></li>";
}
}
?>
<!-- Establecemos cuando el boton siguiente esta desabilitado -->
<?php if($pagina == $NumeroPaginas): ?>
<li class="desable">»</li>
<?php else: ?>
<li><a href="?pagina=<?php echo $pagina + 1 ?>">»</a></li>
<?php endif; ?>
</ul>
</section>
</div>
</body>
</html>
styles.css
Código CSS:
Ver original@charset "utf-8";
/* CSS Document */
* {
margin: 0;
padding: 0;
-webkit-box-sizing: border-box;
-moz-box-sizing: borde-box;
box-sizing: border-box;
}
body {
background: #e9e9e9;
color: #2e2e2e;
font-family: Arial, Helvetica, sans-serif;
}
h1 {
margin: 20px 0;
text-align: center;
font-family: "Oswald", Arial, helvetica, sans-serif;
color: #ce7f08;
font-weight: normal;
}
.contenedor {
width: 90%;
max-width: 1000px;
margin: auto;
}
.contenedor .articulos{
margin-bottom: 20px;
}
.contenedor .articulos ul {
list-style: none;
}
.contenedor .articulos ul li {
padding: 10px 10px;
border-bottom: 1px solid #c8c8c8;
}
.paginacion ul {
list-style: none;
}
.paginacion ul li {
display: inline-block;
margin-right: 10px;
}
.paginacion ul .active a {
background: #ce7f08;
}
.paginacion ul .desable {
background: #c8c8c8;
display: inline-block;
font-family: "Oswald", Arial, helvetica, sans-serif;
padding: 15px 25px;
cursor: not-allowed;
color: #fff;
text-decoration: none;
}
.paginacion ul li a {
display: inline-block;
font-family: "Oswald", Arial, helvetica, sans-serif;
padding: 15px 25px;
background: #424242;
color: #fff;
text-decoration: none;
}
.paginacion ul li a:hover {
text-decoration: none;
background: #3299bb;
}
xerifandtomas, gracias por tu ayuda.
Saludos