En esta ocasión quiero mostrarles cómo hacer una paginación de resultados usando PHP y como gestor de bases de datos Mysql, además usaremos el framework Bootstrap para la maquetación del CSS y jQuery para hacer una llamada AJAX.
Paso 1: Crear nuestro archivo index.php
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Paginación con PHP, Mysql, jQuery, Ajax y Bootstrap </title>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap-theme.min.css">
</head>
<body>
<div class="container-fluid">
<div class="row">
<div class="col-xs-12">
<h3> Listado de Países </h3>
<div id="loader" class="text-center"> <img src="loader.gif"></div>
<div class="outer_div"></div><!-- Datos ajax Final -->
</div>
</div>
</div>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
</body>
</html>
<script>
$(document).ready(function(){
load(1);
});
function load(page){
var parametros = {"action":"ajax","page":page};
$("#loader").fadeIn('slow');
$.ajax({
url:'paises_ajax.php',
data: parametros,
beforeSend: function(objeto){
$("#loader").html("<img src='loader.gif'>");
},
success:function(data){
$(".outer_div").html(data).fadeIn('slow');
$("#loader").html("");
}
})
}
</script>
Paso 2: Crear el archivo llamado paises_ajax.php, el cual es llamado via AJAX desde el archivo index.php que creamos anteriormente.
<?php
# conectare la base de datos
$con=@mysqli_connect('localhost', 'root', 'root', 'test');
if(!$con){
die("imposible conectarse: ".mysqli_error($con));
}
if (@mysqli_connect_errno()) {
die("Connect failed: ".mysqli_connect_errno()." : ". mysqli_connect_error());
}
$action = (isset($_REQUEST['action'])&& $_REQUEST['action'] !=NULL)?$_REQUEST['action']:'';
if($action == 'ajax'){
include 'pagination.php'; //incluir el archivo de paginación
//las variables de paginación
$page = (isset($_REQUEST['page']) && !empty($_REQUEST['page']))?$_REQUEST['page']:1;
$per_page = 10; //la cantidad de registros que desea mostrar
$adjacents = 4; //brecha entre páginas después de varios adyacentes
$offset = ($page - 1) * $per_page;
//Cuenta el número total de filas de la tabla*/
$count_query = mysqli_query($con,"SELECT count(*) AS numrows FROM countries ");
if ($row= mysqli_fetch_array($count_query)){$numrows = $row['numrows'];}
$total_pages = ceil($numrows/$per_page);
$reload = 'index.php';
//consulta principal para recuperar los datos
$query = mysqli_query($con,"SELECT * FROM countries order by countryName LIMIT $offset,$per_page");
if ($numrows>0){
?>
<table class="table table-bordered">
<thead>
<tr>
<th>Código</th>
<th>Nombre</th>
<th>Moneda</th>
<th>Capital</th>
<th>Continente</th>
</tr>
</thead>
<tbody>
<?php
while($row = mysqli_fetch_array($query)){
?>
<tr>
<td><?php echo $row['countryCode'];?></td>
<td><?php echo $row['countryName'];?></td>
<td><?php echo $row['currencyCode'];?></td>
<td><?php echo $row['capital'];?></td>
<td><?php echo $row['continentName'];?></td>
</tr>
<?php
}
?>
</tbody>
</table>
<div class="table-pagination pull-right">
<?php echo paginate($reload, $page, $total_pages, $adjacents);?>
</div>
<?php
} else {
?>
<div class="alert alert-warning alert-dismissable">
<button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button>
<h4>Aviso!!!</h4> No hay datos para mostrar
</div>
<?php
}
}
?>
Paso 3: Importar la tabla countries.sql. Para que la consulta funcione es necesario realizar la importación de la tabla. Dentro de phpMyAdmin seleccionamos la base de datos a la que importaremos los datos, luego nos dirigimos a la pestaña “importar” seleccionaremos nuestros archivo y finalmente click en el botón continuar para realizar la importación.
Comentarios