Paginar los resultados de una consulta ofrece mayor organización y mayor comodidad al momento de visualizar los datos, para hacernos una idea imaginemos una consulta que de como resultados mil registros en una pagina web, buscar información en esta lista seria realmente buscar una aguja en un pajar, ahora imaginemos la misma consulta pero dividida en paginas de 50 registros, buscar información acerca de un registro seria tarea mucho mas fácil, por esta razón en este tutorial haremos un paginado sencillo pero eficiente el cual podrás usar fácilmente en tu web
Bueno ¡ Manos a la obra !
Para este ejemplo utilizaremos una pequeña base de datos llamada contactos en la cual inserte algunos registros para ver el funcionamiento del paginado.
A continuación el código de creación de la base de datos.
--------------------------------------------------------------------------------------------------------------
CREATE DATABASE IF NOT EXISTS `contactos`;
USE `contactos`;
CREATE TABLE IF NOT EXISTS `contacto` (
`id` int(11) NOT NULL,
`nombre` varchar(50) NOT NULL,
`telefono` int(15) DEFAULT NULL,
`email` varchar(100) DEFAULT NULL,
`direccion` varchar(50) DEFAULT NULL
)
--------------------------------------------------------------------------------------------------------------------------
Para este proyecto he creado la siguiente estructura de carpetas
En la carpeta "core" se encuentran todos los archivos de PHP los cuales hacen lo siguiente:
el archivo conexión.php es el encargado de establecer la conexión a la base de datos como se muestra a continuación
-------------------------------------------------------------------------------------------------------------
<?php
require_once('config.php');
class conexion{
private $db;
public function conexion(){
$this->db = new mysqli(HOST, USER, PASS, DB);
}
public function getConexion(){
if($this->db->connect_errno){
echo "Error en la Conexion con la base de datos";
}
else{
return $this->db;
}
}
public function closeConexion(){
$this->db->close();
}
}
?>
--------------------------------------------------------------------
Esta clase hace uso de los valores establecidos en el archivo config.php en el cual se establecen los parámetros de conexión a la base de datos como se muestra a continuación
--------------------------------------------------------------------------------------------------------------------------
<?php
const HOST = "localhost";
const DB = "contactos";
const USER = "root";
const PASS = "";
?>
---------------------------------------------------------------------------------------------------------------
Siguiendo con los archivos de la carpeta core encontramos el archivo Consulta.php este archivo recibe varios parámetros, el parámetro acción que determina la tarea que realizara este script, las cuales son dos "contar" y "consultar".
otro parámetro de este archivo es el parámetro cantidad, el cual determina la cantidad de registros a devolver y por ultimo el parámetro inicio el cual determina desde que registros se devolverán los resultados
A continuación el archivo Consulta.php
---------------------------------------------------------------------------------------------------------------
<?php
require_once("conexion.php");
$db = new conexion();
$conex = $db->getConexion();
if(!empty($_GET)){
if(!empty($_GET['accion'])){
switch($_GET['accion']){
case 'contar':
$sql = "SELECT COUNT(*) as total FROM contacto";
$result = $conex->query($sql);
$total = $result->fetch_assoc()['total'];
print $total;
break;
case 'consultar':
$sql = "SELECT * FROM contacto LIMIT ".$_GET["inicio"].",".$_GET["cantidad"];
$result = $conex->query($sql);
$response = "<table class='table table-hover table-striped'>";
$response = $response."<thead>
<tr>
<td>#</td>
<td>Nombre</td>
<td>Telefono</td>
<td>Email</td>
<td>Direccion</td>
</tr>
</thead>";
while($row = $result->fetch_assoc()){
$response = $response."<tr><td>".$row['id']."</td>"
."<td>".$row['nombre']."</td>"
."<td>".$row['telefono']."</td>"
."<td>".$row['email']."</td>"
."<td>".$row['direccion']."</td></tr>";
}
$response = $response."</table>";
print $response;
break;
}
}
}
?>
---------------------------------------------------------------------------------------------------------------
La estructura de la pagina web es muy sencilla para los estilos de esta se utilizó el famoso bootstrap
---------------------------------------------------------------------------------------------------------------
Archivo index.html
---------------------------------------------------------------------------------------------------------------
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Paginacion </title>
<link rel="stylesheet" href="css/bootstrap.min.css">
<script src="js/main.js"></script>
</head>
<body>
<div class="container">
<div class="row">
<div class="page-header">
<h1>Paginas</h1>
</div>
</div>
<div class="row">
<div class="row">
<div class="col-md-2">
<label>Resultados por pagina</label>
<select id="results4page" class="form-control">
<option value="5" selected>5</option>
<option value="10">10</option>
<option value="20">20</option>
<option value="30">30</option>
</select>
</div>
<div class="col-md-4">
<br>
<label>Pagina Actual</label>
<span id="currentPage">1</span>
</div>
</div>
<div class="row">
<br>
<div class="col-md-8">
<div id="results"></div>
</div>
</div>
<div class="row">
<div class="col-md-8">
<nav>
<ul class="pagination" id="pages">
<li>
<a href="#" aria-label="Previous">
<span aria-hidden="true">«</span>
</a>
</li>
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
<li><a href="#">5</a></li>
<li id="next">
<a href="#" aria-label="Next">
<span aria-hidden="true">»</span>
</a>
</li>
</ul>
</nav>
</div>
</div>
</div>
</div>
</body>
</html>
--------------------------------------------------------------------
en la carpeta "js" encontramos en archivo main.js este archivo es el encargado de hacer las peticiones vía ajax al archivo Consulta.php.
A continuación el archivo main.js
---------------------------------------------------------------------------------------------------------------
function CreateButtons(numPages) {
var pages = document.querySelector("#pages");
var text = "<li> <a href=" + "\"#\"" + "aria-label=\"Previous\" onclick=\"Previous()\"><span aria-hidden=" + "\"true\"" + ">«</span></a></li>";
for (var i = 0 ; i<numPages ; i++){
text = text + "<li><a href=\"#\" onclick=\"getRecords("+parseInt(i+1) + ")\">"+parseInt(i+1) + "</a></li>";
}
text = text + "<li> <a href=" + "\"#\"" + "aria-label=\"Next\" onclick=\"Next()\" ><span aria-hidden=" + "\"true\"" + ">»</span></a></li>";
pages.innerHTML = text;
}
function SetPages() {
var numRegistros = 0;
var results4page = document.querySelector("#results4page").value;
var url = "/Paginator/core/Consulta.php?accion=contar";
var peticion = new XMLHttpRequest();
peticion.open("GET", url, true);
peticion.addEventListener("load", function(e) {
numRegistros = parseInt(e.target.responseText);
CreateButtons(Math.ceil(numRegistros/results4page));
numPages = Math.ceil(numRegistros/results4page);
}, false);
peticion.send(null);
}
function getRecords(pag) {
var results = document.querySelector("#results4page").value;
var inicio = results * pag - results;
var url = "/Paginator/core/Consulta.php?accion=consultar&inicio="+inicio+"&cantidad="+results;
var peticion = new XMLHttpRequest();
peticion.open("GET", url, true);
peticion.addEventListener("load", function(e){
var datos = e.target.responseText;
document.querySelector("#results").innerHTML = datos;
document.querySelector("#currentPage").innerHTML = pag;
currentPage = pag;
console.log(currentPage);
}, false);
peticion.send(null);
}
function Next(){
console.log(currentPage);
if( currentPage+1 < numPages ){
currentPage = currentPage+1;
getRecords(currentPage);
}
}
function Previous(){
console.log(currentPage);
if( (currentPage - 1) >= 1){
currentPage = currentPage - 1;
getRecords(currentPage);
}
}
window.addEventListener("load", function () {
currentPage = 1;
numPages = 0;
SetPages();
document.querySelector("#results4page").addEventListener("change", function(){
SetPages();
getRecords(1);
}, false);
getRecords(currentPage);
}, false);
---------------------------------------------------------------------------------------------------------------
otro parámetro de este archivo es el parámetro cantidad, el cual determina la cantidad de registros a devolver y por ultimo el parámetro inicio el cual determina desde que registros se devolverán los resultados
A continuación el archivo Consulta.php
---------------------------------------------------------------------------------------------------------------
<?php
require_once("conexion.php");
$db = new conexion();
$conex = $db->getConexion();
if(!empty($_GET)){
if(!empty($_GET['accion'])){
switch($_GET['accion']){
case 'contar':
$sql = "SELECT COUNT(*) as total FROM contacto";
$result = $conex->query($sql);
$total = $result->fetch_assoc()['total'];
print $total;
break;
case 'consultar':
$sql = "SELECT * FROM contacto LIMIT ".$_GET["inicio"].",".$_GET["cantidad"];
$result = $conex->query($sql);
$response = "<table class='table table-hover table-striped'>";
$response = $response."<thead>
<tr>
<td>#</td>
<td>Nombre</td>
<td>Telefono</td>
<td>Email</td>
<td>Direccion</td>
</tr>
</thead>";
while($row = $result->fetch_assoc()){
$response = $response."<tr><td>".$row['id']."</td>"
."<td>".$row['nombre']."</td>"
."<td>".$row['telefono']."</td>"
."<td>".$row['email']."</td>"
."<td>".$row['direccion']."</td></tr>";
}
$response = $response."</table>";
print $response;
break;
}
}
}
?>
---------------------------------------------------------------------------------------------------------------
La estructura de la pagina web es muy sencilla para los estilos de esta se utilizó el famoso bootstrap
Archivo index.html
---------------------------------------------------------------------------------------------------------------
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Paginacion </title>
<link rel="stylesheet" href="css/bootstrap.min.css">
<script src="js/main.js"></script>
</head>
<body>
<div class="container">
<div class="row">
<div class="page-header">
<h1>Paginas</h1>
</div>
</div>
<div class="row">
<div class="row">
<div class="col-md-2">
<label>Resultados por pagina</label>
<select id="results4page" class="form-control">
<option value="5" selected>5</option>
<option value="10">10</option>
<option value="20">20</option>
<option value="30">30</option>
</select>
</div>
<div class="col-md-4">
<br>
<label>Pagina Actual</label>
<span id="currentPage">1</span>
</div>
</div>
<div class="row">
<br>
<div class="col-md-8">
<div id="results"></div>
</div>
</div>
<div class="row">
<div class="col-md-8">
<nav>
<ul class="pagination" id="pages">
<li>
<a href="#" aria-label="Previous">
<span aria-hidden="true">«</span>
</a>
</li>
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
<li><a href="#">5</a></li>
<li id="next">
<a href="#" aria-label="Next">
<span aria-hidden="true">»</span>
</a>
</li>
</ul>
</nav>
</div>
</div>
</div>
</div>
</body>
</html>
--------------------------------------------------------------------
en la carpeta "js" encontramos en archivo main.js este archivo es el encargado de hacer las peticiones vía ajax al archivo Consulta.php.
A continuación el archivo main.js
---------------------------------------------------------------------------------------------------------------
function CreateButtons(numPages) {
var pages = document.querySelector("#pages");
var text = "<li> <a href=" + "\"#\"" + "aria-label=\"Previous\" onclick=\"Previous()\"><span aria-hidden=" + "\"true\"" + ">«</span></a></li>";
for (var i = 0 ; i<numPages ; i++){
text = text + "<li><a href=\"#\" onclick=\"getRecords("+parseInt(i+1) + ")\">"+parseInt(i+1) + "</a></li>";
}
text = text + "<li> <a href=" + "\"#\"" + "aria-label=\"Next\" onclick=\"Next()\" ><span aria-hidden=" + "\"true\"" + ">»</span></a></li>";
pages.innerHTML = text;
}
function SetPages() {
var numRegistros = 0;
var results4page = document.querySelector("#results4page").value;
var url = "/Paginator/core/Consulta.php?accion=contar";
var peticion = new XMLHttpRequest();
peticion.open("GET", url, true);
peticion.addEventListener("load", function(e) {
numRegistros = parseInt(e.target.responseText);
CreateButtons(Math.ceil(numRegistros/results4page));
numPages = Math.ceil(numRegistros/results4page);
}, false);
peticion.send(null);
}
function getRecords(pag) {
var results = document.querySelector("#results4page").value;
var inicio = results * pag - results;
var url = "/Paginator/core/Consulta.php?accion=consultar&inicio="+inicio+"&cantidad="+results;
var peticion = new XMLHttpRequest();
peticion.open("GET", url, true);
peticion.addEventListener("load", function(e){
var datos = e.target.responseText;
document.querySelector("#results").innerHTML = datos;
document.querySelector("#currentPage").innerHTML = pag;
currentPage = pag;
console.log(currentPage);
}, false);
peticion.send(null);
}
function Next(){
console.log(currentPage);
if( currentPage+1 < numPages ){
currentPage = currentPage+1;
getRecords(currentPage);
}
}
function Previous(){
console.log(currentPage);
if( (currentPage - 1) >= 1){
currentPage = currentPage - 1;
getRecords(currentPage);
}
}
window.addEventListener("load", function () {
currentPage = 1;
numPages = 0;
SetPages();
document.querySelector("#results4page").addEventListener("change", function(){
SetPages();
getRecords(1);
}, false);
getRecords(currentPage);
}, false);
---------------------------------------------------------------------------------------------------------------
No hay comentarios.:
Publicar un comentario