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

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

9 comentarios en “Paginación de registros de una base MySQL con PHP y jQuery – Parte 1”

  1. eduardo dice:

    Hola como se llama el archivo donde va el codigo Jquery y en q parte del documento, y tambien solo es ese codigo? o en el body va algo mas. tu codigo lo hice tal y como esta explicado pero no funciona.

    1. denker dice:

      El codigo jQuery va en el dentro de la etiqueta head y el en body van los divs donde se mostrara la informacion y paginacion

  2. angel dice:

    Tu información es de mucha utilidad. Sin embargo, la forma como lo redactas, lo hace difícil de entender.

  3. alejandro dice:

    saludos necesito ayuda el codigo me da un error
    parsererror SyntaxError: JSON.parse: unexpected character at line 1 column 1 of the JSON data

  4. Edgard dice:

    Contiene muchísimos errores, como te atreves a publicarlo.

    1. sun2012 dice:

      hola, como cuales, ya que el post tiene 3 años, saludos.

  5. falta la segunda parte..

Deja un comentario