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
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 |
<!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.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 |
<?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.
