Paginación simple usando PHP y MySQLi

En este tutorial, te vamos a mostrar cómo crear una paginación simple usando PHP y MySQLi. La paginación es un conjunto de números en el que cada número se asigna a una página o, en algunos casos, se utiliza para dividir las filas de una tabla MySQL para mejorar la presentación visual.

Entonces empecemos.

Creando nuestra base de datos

El primer paso es crear nuestra base de datos.
1. Abre phpMyAdmin.
2. Haz clic en bases de datos, crea una base de datos y colocale el nombre que desees, para este tutorial nosotros la hemos llamado “test_pagination”, pero tu puedes nombrarla como desees .
3. Después de crear una base de datos, haz clic en la pestaña “SQL” y ejecuta el siguiente código:


-- phpMyAdmin SQL Dump
-- version 4.5.1
-- http://www.phpmyadmin.net
--
-- Servidor: 127.0.0.1
-- Tiempo de generación: 25-10-2017 a las 22:04:07
-- Versión del servidor: 10.1.19-MariaDB
-- Versión de PHP: 7.0.13

SET SQL_MODE = "NO_AUTO_VALUE_ON_ZERO";
SET time_zone = "+00:00";


/*!40101 SET @OLD_CHARACTER_SET_CLIENT=@@CHARACTER_SET_CLIENT */;
/*!40101 SET @OLD_CHARACTER_SET_RESULTS=@@CHARACTER_SET_RESULTS */;
/*!40101 SET @OLD_COLLATION_CONNECTION=@@COLLATION_CONNECTION */;
/*!40101 SET NAMES utf8mb4 */;

--
-- Base de datos: `test_pagination`
--

-- --------------------------------------------------------

--
-- Estructura de tabla para la tabla `user`
--

CREATE TABLE `user` (
  `userid` int(11) NOT NULL,
  `firstname` varchar(30) NOT NULL,
  `lastname` varchar(30) NOT NULL,
  `username` varchar(30) NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=latin1;

--
-- Volcado de datos para la tabla `user`
--

INSERT INTO `user` (`userid`, `firstname`, `lastname`, `username`) VALUES
(1, 'neovic', 'devierte', 'nurhodelta'),
(2, 'julyn', 'divinagracia', 'julyn'),
(3, 'lee', 'ann', 'lee09'),
(4, 'tintin', 'demapanag', 'tin45'),
(5, 'dee', 'tolentino', 'deedee'),
(6, 'jaira', 'jacinto', 'jjacinto'),
(7, 'tetai', 'devi', 'tdevi'),
(8, 'tintin', 'hermosa', 'tinhermosa'),
(9, 'piolo', 'pascual', 'ppascual'),
(10, 'lee', 'bagun', 'faker'),
(11, 'barny', 'dino', 'bdino'),
(12, 'wqeqweq', 'werew', 'weqweqw'),
(13, 'weqwe', 'weqwe', 'weqwe'),
(14, 'wqeqweq', 'weqwe', 'weqweqw'),
(15, 'wewqeq', 'wewqeqweqw', 'wewqeqweq'),
(16, 'weqwe', 'wewqeqw', 'wewqeqw'),
(17, 'wewqeq', 'wewqeqweq', 'weqweqweqw'),
(18, 'weqw', 'wewqeqw', 'wqeqwe'),
(19, 'weqweq', 'wewqeqweqw', 'wewqewqeqw'),
(20, 'qweqw', 'weqw', 'weqw'),
(21, 'w', 'weqw', 'qweqweqw'),
(22, 'weqw', 'weqweqw', 'wqeqweqw'),
(23, 'weqweq', 'wqeqweqw', 'weqweqw');

--
-- Índices para tablas volcadas
--

--
-- Indices de la tabla `user`
--
ALTER TABLE `user`
  ADD PRIMARY KEY (`userid`);

--
-- AUTO_INCREMENT de las tablas volcadas
--

--
-- AUTO_INCREMENT de la tabla `user`
--
ALTER TABLE `user`
  MODIFY `userid` int(11) NOT NULL AUTO_INCREMENT, AUTO_INCREMENT=24;
/*!40101 SET CHARACTER_SET_CLIENT=@OLD_CHARACTER_SET_CLIENT */;
/*!40101 SET CHARACTER_SET_RESULTS=@OLD_CHARACTER_SET_RESULTS */;
/*!40101 SET COLLATION_CONNECTION=@OLD_COLLATION_CONNECTION */;

Creando nuestra conexión

El siguiente paso es crear una conexión a la base de datos y guardarla como “conn.php”. Este archivo servirá como nuestro puente entre nuestro formulario y nuestra base de datos. Para crear el archivo, abre tu editor de código HTML y pega el siguiente código.

<?php
 
//MySQLi Procedural
$conn = mysqli_connect("localhost","root","","test_pagination");
if (!$conn) {
 die("Connection failed: " . mysqli_connect_error());
}
 
?>

Creando nuestro código de paginación

El siguiente paso es crear nuestro que se encargara de realizar la paginación. Nombraremos este archivo como “pagination.php”.

<?php

	include("conn.php");
	
	$query=mysqli_query($conn,"select count(userid) from `user`");
	$row = mysqli_fetch_row($query);

	$rows = $row[0];
	
	$page_rows = 10;

	$last = ceil($rows/$page_rows);

	if($last < 1){
		$last = 1;
	}

	$pagenum = 1;

	if(isset($_GET['pn'])){
		$pagenum = preg_replace('#[^0-9]#', '', $_GET['pn']);
	}

	if ($pagenum < 1) { 
		$pagenum = 1; 
	} 
	else if ($pagenum > $last) { 
		$pagenum = $last; 
	}

	$limit = 'LIMIT ' .($pagenum - 1) * $page_rows .',' .$page_rows;
	
	$nquery=mysqli_query($conn,"select * from `user` $limit");

	$paginationCtrls = '';

	if($last != 1){
		
	if ($pagenum > 1) {
        $previous = $pagenum - 1;
		$paginationCtrls .= '<a href="'.$_SERVER['PHP_SELF'].'?pn='.$previous.'" class="btn btn-default">Anterior</a> &nbsp; &nbsp; ';
		
		for($i = $pagenum-4; $i < $pagenum; $i++){
			if($i > 0){
		        $paginationCtrls .= '<a href="'.$_SERVER['PHP_SELF'].'?pn='.$i.'" class="btn btn-default">'.$i.'</a> &nbsp; ';
			}
	    }
    }
	
	$paginationCtrls .= ''.$pagenum.' &nbsp; ';
	
	for($i = $pagenum+1; $i <= $last; $i++){
		$paginationCtrls .= '<a href="'.$_SERVER['PHP_SELF'].'?pn='.$i.'" class="btn btn-default">'.$i.'</a> &nbsp; ';
		if($i >= $pagenum+4){
			break;
		}
	}

    if ($pagenum != $last) {
        $next = $pagenum + 1;
        $paginationCtrls .= ' &nbsp; &nbsp; <a href="'.$_SERVER['PHP_SELF'].'?pn='.$next.'" class="btn btn-default">Siguiente</a> ';
    }
	}

?>

Creando nuestra tabla de ejemplo

Por último, creamos nuestra tabla de ejemplo. Nombramos a dicho archivo así:  “index.php”.

<?php include('pagination.php'); ?>
<!DOCTYPE html>
<html>
<head>
	<title>Paginación simple usando PHP y MySQLi</title>
	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
	<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
	<div style="height: 20px;"></div>
	<div class="row">
	<h2 class='text-center text-success'>Paginación simple usando PHP y MySQLi</h2>
	<div class="col-lg-2">
		
	</div>
	<div class="col-lg-8">
	<table width="80%" class="table table-striped table-bordered table-hover">
		<thead>
			<th>ID</th>
			<th>Nombres</th>
			<th>Apellidos</th>
			<th>Usuario</th>
		</thead>
		<tbody>
		<?php
			while($crow = mysqli_fetch_array($nquery)){
			?>
				<tr>
					<td><?php echo $crow['userid']; ?></td>
					<td><?php echo $crow['firstname']; ?></td>
					<td><?php echo $crow['lastname']; ?></td>
					<td><?php echo $crow['username']; ?></td>
				</tr>
			<?php
			}		
		?>
		</tbody>
	</table>
	<div id="pagination_controls"><?php echo $paginationCtrls; ?></div>
	</div>
	<div class="col-lg-2">
	</div>
	</div>
</div>
</body>
</html>

Luego vamos a ejecutar nuestro script en el navegador web, esto para probar su funcionalidad. A continuación una captura de pantalla de nuestro ejemplo.

Hasta aquí llega nuestro tutorial. En caso de que tengas problemas con la base de datos, hemos incluido una base de datos de ejemplo en el archivo descargable de este tutorial ubicado en la carpeta ‘db’. Si tienes algún comentario o pregunta, no dudes en comentar a continuación.



 

  • Javier

    Hola! Me gustaría saber como puedo ordenar estos registros por fecha, desde la más reciente a la antigua.. desde pagination, agregando el “ORDER BY fecha ASC” Me deja de funcionar la consulta.

    Espero una respuesta vuesta!
    Un cordial saludo.
    Javier