Paginación de registros de una base MySQL con PHP y jQuery – Parte 1

Stay hungry, stay foolish

Steve Jobs

Hola a todos, el dia de hoy les traigo un ejercicio en el cual explicaré como podemos paginar los registros de una base de datos MySQL con PHP y jQuery, el ejercicio incluye ajax para evitar que nuestra pagina se recargue cada vez que cambiamos de pagina por lo tanto solo se actualizará la parte de la tabla donde van los datos y los números de pagina. Comenzemos.

Para este ejercicio vamos a utilizar la siguiente informacion de la siguiente tabla:


CREATE TABLE IF NOT EXISTS `base`.`tblalumno` (
 `idalumno` INT UNSIGNED NOT NULL AUTO_INCREMENT ,
 `nombre` VARCHAR(15) NOT NULL ,
 `apellidos` VARCHAR(25) NOT NULL ,
 `sexo` ENUM('f','m') NOT NULL ,
 `grado` TINYINT(2) NULL ,
 PRIMARY KEY (`idalumno`) ,
 UNIQUE INDEX `idalumno_UNIQUE` (`idalumno` ASC) )
ENGINE = InnoDB;

CODIGO JQUERY

Para el código jQuery vamos a crear una función que se va a encargar de mostrar la tabla con los datos y números de pagina la llamaremos mostrardatos, va a recibir como parámetro el numero de pagina que se va a mostrar y contendrá el siguiente código.


function mostrardatos(pagina){
	var numfilas = 3;
	var paginasamostrar=8;
	$.ajax({
		type: "POST",
		dataType: 'json',
		url: "obtenerdatos.php",
		data: {filasxpagina:numfilas,paginasamostrar:paginasamostrar,pagina:pagina},
	}).done(function(respuesta){
		if(respuesta.estado == 1){
			$("#datos").html(respuesta.encabezados + respuesta.datos);
			$("#paginacion").html(respuesta.paginacion);
		}
		else
			$("#mensaje").html(respuesta.mensaje);
	});
}

Para la funcion se crean 2 variables: numfilas y paginasamostrar que van a almacenar el numero de filas a mostrar por pagina y la cantidad de paginas que se desean mostrar en la paginacion respectivamente, despues se hace una petición ajax, los datos se van a enviar mediante POST y la respuesta que va a regresar es un objeto JSON, también le mandamos el numero de filas y paginas a mostrar, el archivo PHP que procesa la petición se llama obtenerdatos.php. Con la respuesta del servidor primero se verifica que no hubo algún problema con un if que evalúa que la respuesta sea igual a 1 eso indicaría que se obtuvieron los registros a mostrar y por lo tanto se agregan los datos al elemento con id datos y los números de pagina al elemento con id paginacion, en caso que la respuesta no sea igual a 1 mostraríamos un mensaje en el elemento con id mensaje.

Lo siguiente es asignar el evento click a todos los números de pagina, debido a que estos se crean de forma dinámica lo hacemos con el método .on() de jQuery, dentro del evento click  llamamos a la función mostrardatos y le pasamos el numero de pagina a mostrar el cual se obtiene a partir del atributo id de cada etiqueta <a>

$("#paginacion").on("click","a", function(event){
    pagina = this.id;
    mostrardatos(pagina);
});

Lo ultimo que hacemos es llamar a la función mostrardatos que mostrara la información la primera vez que cargue la pagina.


mostrardatos(1);

El codigo completo de jQuery lo tenemos aqui.


$(document).ready(function(){
    function mostrardatos(pagina){
       var numfilas = 3;
       var paginasamostrar=8;
       $.ajax({
          type: "POST",
          dataType: 'json',
          url: "obtenerdatos.php",
          data: {filasxpagina:numfilas,paginasamostrar:paginasamostrar,pagina:pagina},
       }).done(function(respuesta){
          if(respuesta.estado == 1){
             $("#datos").html(respuesta.encabezados + respuesta.datos);
             $("#paginacion").html(respuesta.paginacion);
          }
          else
             $("#mensaje").html(respuesta.mensaje);
       });
    }

    $("#paginacion").on("click","a", function(event){
       pagina = this.id;
       mostrardatos(pagina);
    });

    mostrardatos(1);
});

El codigo HTML que es donde se mostrara la informacion es el siguiente:

<div id="datos"></div>
<div id="paginacion"></div>

La segunda parte incluye el código PHP que procesa la peticion

Paginación de registros de una base MySQL con PHP y jQuery PARTE 2