Paginación de resultados con jQuery, Ajax y PHP

La paginación de resultados se hace necesaria a medida que tenemos grandes cantidades de registros que mostrar.

En este artículo vamos a explicar una versión mejorada sobre la paginación de resultados pero esta vez vamos a utilizar las tecnologías: jQuery, Ajax, PHP y MySQLi.

Cuando tenemos muchos registros y no queremos mostrar una lista de registro muy larga podemos usar paginación para mostrar los resultados de la consulta en distintas páginas.

Cuando se presentan en una página web registros crecientes de una tabla de una base de datos en formato listado, en la mayoría de los casos acaban siendo demasiados registros como para colocarlos todos en una misma página. En estas ocasiones se suele paginar los resultados, quizás cientos, en distintas páginas con conjuntos de registros mucho menos numerosos.

Por ejemplo, podemos presentar los resultados en páginas de 10 elementos o 20, dependiendo de nuestras intenciones y el tipo de datos que se estén presentando. Este efecto lo has podido observar repetidas veces en los buscadores.

En este artículo vamos a ilustrar un ejemplo en el que vamos a tener más de 100 productos de nuestra tienda que estamos leyendo de la base de datos y hemos decidido mostrarlos de 6 en 6.

La paginación se puede hacer solo con PHP pero, en este caso, cada vez que se pulsa en un número de página se recarga la página. Quizá no te interesa eso por cuestiones de usabilidad y de hacer esperar al usuario para ver más resultados. En esta entrada vamos a ver como aplicarle jQuery y Ajax para paginar resultados sin recargar la página de nuevo.

Esta entrada ha sido actualizada el 16/07/2018 aportando toda la experiencia, profesionalidad y compromiso que hemos adquirido en el transcurso del tiempo.

En el archivo principal o index.php, dentro del <head> debes agregar los scripts y estilos necesarios para hacer funcionar la paginación:

<link rel="stylesheet" href="css/styles.css">
<script src="https://code.jquery.com/jquery-3.2.1.js"></script>

Tan solo agregamos estilos propios del ejemplo y la librería jQuery. En el ejemplo en funcionamiento, para el aspecto visual también nos apoyamos en la tecnología Bootstrap para no tener que aplicar muchos estilos propios. De esta forma nos ahorramos mucho trabajo.

En el archivo principal o index.php es importante agregar el siguiente código:

<?php 
require('config.php');
$result = $connexion->query('SELECT COUNT(*) as total_products FROM product WHERE active = 1');
$row = $result->fetch_assoc();
$num_total_rows = $row['total_products'];
?>

Requerimos del archivo “config.php” que tan solo conecta con la base de datos utilizando la tecnología MySQLi y dispone del número de elementos que queremos para cada página. Este archivo contiene:

<?php
define('DB_SERVER', 'localhost');
define('DB_SERVER_USERNAME', 'YOUR USERNAME');
define('DB_SERVER_PASSWORD', 'YOUR PASSWORD');
define('DB_DATABASE', 'YOUR DATABASE');
define('NUM_ITEMS_BY_PAGE', 6);
 
$connexion = new mysqli(DB_SERVER, DB_SERVER_USERNAME, DB_SERVER_PASSWORD, DB_DATABASE);
?>

Después tan solo hacemos una consulta a la base de datos para saber el número de productos que hay activos que será un parámetro importante para el número de páginas.

Dentro del <body> debes agregar el código que recorre los primeros registros y los muestra en pantalla, además de los números de paginación:

<?php
//Si hay registros
if ($num_total_rows > 0) {
    $num_pages = ceil($num_total_rows / NUM_ITEMS_BY_PAGE);
    $result = $connexion->query(
        'SELECT * FROM product p 
        LEFT JOIN product_lang pl ON (pl.id_product = p.id_product AND pl.id_lang = 1) 
        LEFT JOIN image i ON (i.id_product = p.id_product AND cover = 1) 
        WHERE active = 1 
        ORDER BY date_upd DESC 
        LIMIT 0, '.NUM_ITEMS_BY_PAGE
    );
    if ($result->num_rows > 0) {
        echo '<ul class="row items">';
        while ($row = $result->fetch_assoc()) {
            echo '<li class="col-lg-4">';
            echo '<div class="item">';
            echo '<h3>'.$row['name'].'</h3>';
            ...
            echo '</div>';
            echo '</li>';
 
        }
        echo '</ul>';
    }
 
    if ($num_pages > 1) {
        echo '<div class="row">';
        echo '<div class="col-lg-12">';
        echo '<nav aria-label="Page navigation example">';
        echo '<ul class="pagination justify-content-end">';
 
        for ($i=1;$i<=$num_pages;$i++) {
            $class_active = '';
            if ($i == 1) {
                $class_active = 'active';
            }
            echo '<li class="page-item '.$class_active.'"><a class="page-link" href="#" data="'.$i.'">'.$i.'</a></li>';
        }
 
        echo '</ul>';
        echo '</nav>';
        echo '</div>';
        echo '</div>';
    }
}
?>

Finalmente dentro del <head> o justo debajo de la etiqueta de cierre </body> puedes agregar el controlador del evento:

<script type="text/javascript">
$(document).ready(function() {	
    $('.pagination li a').on('click', function(){
        $('.items').html('<div class="loading"><img src="images/loading.gif" width="70px" height="70px"/><br/>Un momento por favor...</div>');
 
        var page = $(this).attr('data');		
        var dataString = 'page='+page;
 
        $.ajax({
            type: "GET",
            url: "ajax.php",
            data: dataString,
            success: function(data) {
                $('.items').fadeIn(2000).html(data);
                $('.pagination li').removeClass('active');
                $('.pagination li a[data="'+page+'"]').parent().addClass('active');
            }
        });
        return false;
    });              
});    
</script>

El código anterior lo que hace es esperar a que algún número del bloque de paginación sea clikeado para ejecutar el proceso de paginación.

Por cada enlace de la paginación que se haga click, rellenamos el contenedor de elementos con una imagen que aplica el efecto de cargando… (esto se puede quitar para acelerar el proceso de la paginación), recogemos el parámetro que nos indica el número de página que el usuario quiere ver y, luego, mediante la técnica Ajax hacemos una llamada asíncrona al archivo “ajax.php” pasándole el número de página usando el método GET.

Mediante el success del ajax depositamos la información que nos envía el archivo “ajax.php” en el contenedor deseado y activamos el número de página en el que se ha hecho click.

El archivo “ajax.php” se encarga de retornar los productos que hay en la página escogida. Puedes ver el código a continuación:

<?php
require_once('config.php');
 
$html = '';
$page = $_GET['page'];
$rowsPerPage = NUM_ITEMS_BY_PAGE;
$offset = ($page - 1) * $rowsPerPage;
sleep(1);
 
$result = $connexion->query(
    'SELECT * FROM product p 
    LEFT JOIN product_lang pl ON (pl.id_product = p.id_product AND pl.id_lang = 1) 
    LEFT JOIN `image` i ON (i.id_product = p.id_product AND cover = 1) 
    WHERE active = 1 
    ORDER BY date_upd DESC LIMIT '.$offset.', '.$rowsPerPage
);
if ($result->num_rows > 0) {
    while ($row = $result->fetch_assoc()) {
        $html .= '<li class="col-lg-4">';
        $html .= '<div class="item">';
        $html .= '<h3>'.$row['name'].'</h3>';
        ...
        $html .= '</div>';
        $html .= '</li>';
    }
}
 
echo $html;
?>

Qué hace este código?

  • Conectamos con la base de datos.
  • Recepcionamos la página que ha elegido el usuario.
  • Calculamos el número por el cual se debe empezar a retornar registros.
  • La función sleep() la usamos para retrasar el proceso y ver el efecto de cargando. Se puede quitar si no interesa.
  • Hacemos la consulta paginada usando LIMIT en la consulta.
  • Recorremos y rellenamos nuestra variable $html con la información de los registros paginados.
  • Lo retornamos con echo a la llamada Ajax.

Ver demo Descargar

Autor
Escrito por Jose Aguilar - Experto programador Prestashop y Wordpress.
Te ha servido? Valora esta entrada!
1 estrella2 estrellas3 estrellas4 estrellas5 estrellas (38 votos, promedio: 4,63 de 5)
Cargando…
Comparte en las redes sociales

127 respuestas a “Paginación de resultados con jQuery, Ajax y PHP”

  1. Carlos dice:

    Excelente aporte, que tendria que modificar para mostrar una tabla con 5 columnas y 5 filas por ejemplo, es decir 25 productos por pagina colocados en una tabla?

  2. Enrique dice:

    Hola,

    Estoy intentando lo que has puesto y no me funciona. He revisado y me falta claro el script de jquery del principio. Ese script lo tienes por algún lado?

    Gracias.

  3. Helder dice:

    amigo, puedes poner el codigo completo, por favor…!!
    espero tu respuesta, gracias…!!

  4. Francisco dice:

    Excelente aporte, perfecto para mi trabajo de la universidad!!!! ya que tenia una paginacion sin JQuery y esta es muchisisimo mejor ya que no hay que estar refrescando la pagina perdiendo tiempo en eso…..

  5. Francisco dice:

    soy novato y para nada le entiendo, no seria mala idea compartir la muestra que enseñas

  6. Magnus dice:

    Magnifico Tutorial Jose me has resuelto un gran problema
    Gracias tambien Jesus Calle lo he descargado y va de Fabula !!!

  7. victor hugo dice:

    Excelente tutorial amigo, pero actualmente el ejemplo no funciona, por favor tu apoyo para subir el archivo para descarga, gracias por todo.

  8. Mario dice:

    Muy buenos los ficheros de ejemplo.
    Me surge la siguiente duda: ¿qué hay que hacer para que aparezca el cursor como una mano como ocurre con las etiquetas <a href ???
    Gracias.

  9. mariano dice:

    hola, muy buen aporte, pero queria saber si sabes como hacer para poner un slide de fotos en la parte de la descrpcion, estoy intentando encontrar algo asi pero nada. O sea, que donde pusiste la foto haya un slide de fotos

    • Jose Aguilar dice:

      HOla buenas tardes,

      Que se pretende hacer paginación de sliders? o no he entendido bien? Si es así, tendrás que escoger tu slider favorito e incrustarlo en el trozo de la descripción. Seguramente con algunos plugins tendrás problemas pero por ejemplo con basic jquery slider seguro que no.

      Saludos

  10. ing ulises dice:

    muy buen código gracias amigo

  11. Juan Vargas dice:

    Hola Jose buenos dias, me gusta tu pagina, me gustaria saber si tienes el codigo de este ejemplo de paginacion con ajax, me refiero a estilos y demas, te quedare agradecido. Gracias

  12. Hola, es lo que buscaba, no tuvieras el codigo fuente para ver como lo estas haciendo? existe una paginacion que luego de recibir los registros con una consulta, ya no vuelva a realizar otra, sino que pueda trabajar con los que tengo y paginar los mismos? Saludos de antemano

  13. rody dice:

    hola, puedes colocar el codigo? por que no tienes un link para descargar ?

  14. emilio dice:

    en el php no hace falta en la etiqueta class=’paginate’ si no como va escuchar los eventos cada liga

  15. Wilson Muñoz dice:

    Sólo quería agradecer por el código, me ha ayudado bastante para darme una idea. He cambiado la opción live por un onclick de javascript para mis fines pero se mantiene casi integro lo demás, gracias de nuevo

  16. cdwl dice:

    por qué no dejas el código para descargarlo?????????

  17. José Moo dice:

    Muy bueno, pero solo puedo ver la página 1, no puedo ver las demás páginas. por favor como corrijo eso.

  18. rody dice:

    Hola amigo, tengo un problema cuando son muchos registros me muestra todos los links del paginador,
    anterior 1 2 3 4 …… 39 40 41 siguiente
    no hay como hacer eso??

  19. Alex dice:

    Gracias por el código y la explicación, ayuda mucho tener gente como tú en esta comunidad 😉

  20. Alicia dice:

    A mi me tira este error y no sé cómo solucionarlo

    Warning: mysql_result() expects parameter 1 to be resource, boolean given in /home/ortopedi/public_html/01arg/includes/pagination.php on line 55

    Warning: mysql_result() expects parameter 1 to be resource, boolean given in /home/ortopedi/public_html/01arg/includes/pagination.php on line 59

  21. Alicia dice:

    A mi me tira este error y no sé cómo solucionarlo

    Warning: mysql_result() expects parameter 1 to be resource, boolean given in /home/ortopedi/public_html/01arg/includes/pagination.php on line 55

    y en la línea 59

  22. Emanuel dice:

    Hola, lo que no se es que tengo q poner en los datos de conexion… localhost,alguien podria ayudarme?..que es? es el IP?DNS? o q?

  23. Emanuel dice:

    Hola,como estan, lo que no se es que tengo q poner en los datos de conexion… localhost,alguien podria ayudarme?..que es? es el IP?DNS? o q?

  24. Emanuel dice:

    Hola,como estan, lo que no se es que tengo q poner en los datos de conexion… localhost,alguien podria ayudarme?..que es? es el IP?DNS? o q?

    y el resto?

    o como se completa?alguien podria mostrame un ejemplo de como queda completado este codigo?gracias…

  25. Vladimir dice:

    Muy bien, gracias buen ejemplo, me será muy util

  26. Israel Sánchez dice:

    Hola que tal, actualmente estoy creando un sitio web con una paginación similar a la que creaste, pero tengo un problema y espero que puedas ayudarme. Cuando nos encontramos en la página numero 10 por ejemplo y esa página tiene un enlace que me redirecciona hacia otro sitio, al querer volver con el botón regresar del navegador, no me deja en la paginación en la que se encontraba antes de salirme del sitio. Veo que en tu ejemplo ocurre lo mismo. Habrá alguna solución para esto? Gracias.

  27. victor dice:

    Que tal, muchas gracias por tu ejemplo me sirvió mucho. Traigo un detalle,la pagina 1 me la carga perfectamente (con estilos y codigo html) pero al pasar a la pagina dos de resultados, solamente me despliega el texto plano, titulo descripcion etc. todo plano.

    Sabras porque? muchas gracias!

  28. santos dice:

    a todos los que tienen este problema :
    Warning: mysql_result() expects parameter 1 to be resource, boolean given in /home/ortopedi/public_html/01arg/includes/pagination.php on line 55

    Warning: mysql_result() expects parameter 1 to be resource, boolean given in /home/ortopedi/public_html/01arg/includes/pagination.php on line 59

    la solucion es la siguiente:
    linea 54 y 57 sustituir por —>
    $query_num_ratings = mysql_query(“SELECT COUNT(*) as num FROM services WHERE service_id=”.$row_services[‘service_id’], $conexion);

    $query_sum_ratings = mysql_query(“SELECT SUM(rating_num) as sum FROM services WHERE service_id=”.$row_services[‘service_id’], $conexion);

    • santos dice:

      error esa no es la solución solo comenten de la linea 54 a la linea 70…marca ese error por que no existe una tabla que se llama services_rating
      -….. XD

  29. santos dice:

    a los que tienen el problema esta es la verdadera solucion:…..
    $query_num_ratings = mysql_query(“SELECT COUNT(*) as num FROM services WHERE service_id=”.$row_services[‘service_id’], $conexion);

    $query_sum_ratings = mysql_query(“SELECT SUM(rating_num) as sum FROM services WHERE service_id=”.$row_services[‘service_id’], $conexion);

    la solución solo comenten de la linea 54 a la linea 70…marca ese error por que no existe una tabla que se llama services_rating
    -….. XD

  30. Pablo dice:

    Hola, tu codigo es barbaro, pero tengo un problema, en mi caso necesito sacar los datos de la tabla cuya categoria sea igual a x, debo para eso pasar un parametro por get, como lo puedo incluir?

    saludos

  31. Ivan dice:

    Estimados,
    esta estupendo el articulo! pero al implementar todo ok, pero al hacer click en la segunda pagina me sale lo siguiente
    Warning: mysql_query() expects parameter 2 to be resource, null given in C:\AppServ\www\portal\portal2\pagination_me\includes\pagination.php on line 3

    Warning: mysql_num_rows(): supplied argument is not a valid MySQL result resource in C:\AppServ\www\portal\portal2\pagination_me\includes\pagination.php on line 4

    Ayuda please!

  32. HUGO dice:

    Excelete tutorial te felicito !!!!!!!!! Muchos exitos

  33. Miguel dice:

    Hola me podrías ayudar con la estructura de la segunda tabla la de services_rating solucione los de la actualización del split a php 5.3 pero no he descifrado la estructura de la segunda tabla. Te agradezco de antemano tu ayuda.

  34. Juan Carlos dice:

    Doc te felicito, y me parece bueno tu aporte peor me sala un erro del split, si cambiamos eso por explode seria escente, gracias por tus aportes vale sun Peru

  35. carlos dice:

    Hola, tengo un problema me funciona casi bien.El problema que tengo es que al pinchar en la 2 pagina se me queda girando todo el rato el gif de cargando.

    Creo que el problema es que no le llega la variable page de ajax.Por eso lo he cambiado por pagina.

    En mi barra de dirección tengo esto:
    http://localhost/cinecharlie/index.php?page=pelicula&portada=sh2.jpg

    gracias un saludo

  36. Omar Hernandez S. dice:

    Que genial tutorial, excelentes codigos, muy facil de entender, gracias me has ayudado mucho en el desarrollo de mi proyecto.

    Mil gracias, funciona perfectamente y ya lo acople con las bases de datos que estoy trabajando.

    Saludos desde Tlaxcala, México.

  37. juan dice:

    Buen dia.
    el ejemplo funciona muy bien, pero al ingresar el doble o mas informacion, o tambien al reducir el numero de datos que muestre por pagina, las paginas se imcrementan y se distorciona el nuemro de paginas, me podrian ayudar a solucionar el problema.

    • Fernanda dice:

      Me funciona de mil maravillas pero estoy igual que Juan, se me rompe la paginacion al agregar algunas filas a la tabla

  38. Claudio Guzman dice:

    El ejemplo funciona bien cuando lo descargas, lo único que debes intervenir los archivos para definir bien las ubicaciones y direccionamientos.

    Pero en general bien.

    Saludos.

  39. carlospe dice:

    Buenas… Amigo, muy buen aporte, pero veras tengo algo, estoy creando una pagina; Es una tienda online y quiero mostrar esta paginación en mi catalogo para mostrar un numero máximo de productos, mi pregunta es: que ahora que le eh modificado algunos datos(solo lo referente a la base de datos y los campos que quiero que muestre.) y ahora me tira un error. Crees que podrías ayudarme?

    • Jose Aguilar dice:

      Nos tendrás que facilitar un enlace para ver el error y seguramente alguien te ayudará

      • carlospe dice:

        el problema es que aun no lo tengo en linea, solo esta en localhost, me hacen falta un par de cosas pero si quieren les puedo dejar el código para mi catalogo y me dicen de antemano gracias

        nombre; ?>

        <img src="images/imagen; ?>” alt=””>
        descripcion; ?>
        id, “Ver Detalle”, “class=’boton1′”); ?>

        los datos los obtengo de mi base de datos y todo estaba bien antes pero luego los clientes comenzaron a pedir mas diseños y ya que serian muchos se me ocurrió ponerle una paginacion pero no se como adaptarla sin romper la estructura anterior. la pagina es un proyecto personal y no me gustaría dejarla incompleta… Mil gracias

  40. alberto dice:

    split(): Empty regular expression in C:\xampp\htdocs\paginacion\includes\pagination.php on line 40 me sale ese problema por que

  41. frank tapia dice:

    no me click en los enlaces, no me muestra como si fueran link; el atributo data captura el numero de pagina, pero no puedo hacer click:
    echo ” “;
    if ($total_paginas > 1) {
    echo ”;
    echo ”;
    if ($pageNum != 1)
    echo ‘Anterior‘;
    for ($i=1;$i<=$total_paginas;$i++) {
    if ($pageNum == $i)
    //si muestro el índice de la página actual, no coloco enlace
    echo '‘.$i.’‘;
    else
    //si el índice no corresponde con la página mostrada actualmente,
    //coloco el enlace para ir a esa página
    echo ‘‘.$i.’‘;
    }
    if ($pageNum != $total_paginas)
    echo ‘Siguiente‘;
    echo ”;
    echo ”;
    }
    echo ” “;

  42. frank tapia dice:

    firebug me arroja el siguiente error con respecto al uso de live.
    TypeError: $(…).live is not a function

    $(‘.paginate’).live(‘click’, function(){

  43. frank tapia dice:

    solo me acepta un click, depues de eso, no importa en cual pagina en anterior o siguiente, el evento no se ejecuta, el javascript quedaria asi:

    $(document).ready(function() {
    $(‘.paginate’).on(‘click’, function(){

    $(‘#content’).html(”);

    var page = $(this).attr(‘data’);
    var dataString = ‘page=’+page;

    $.ajax({
    type: “GET”,
    url: “centro.php”,
    data: dataString,
    success: function(data) {
    $(‘#content’).fadeIn(1000).html(data);
    }
    });
    });
    });

    y el php quedaria asi
    [QUOTE]
    if ($total_paginas > 1) {
    echo ”;
    echo ”;
    if ($pageNum != 1)
    echo ‘Anterior‘;
    for ($i=1;$i<=$total_paginas;$i++) {
    if ($pageNum == $i)
    //si muestro el índice de la página actual, no coloco enlace
    echo '‘.$i.’‘;
    else
    //si el índice no corresponde con la página mostrada actualmente,
    //coloco el enlace para ir a esa página
    echo ‘‘.$i.’‘;
    }
    if ($pageNum != $total_paginas)
    {
    echo ‘Siguiente‘;
    }
    elseif($pageNum == $total_paginas)
    {
    echo ‘Siguiente‘;
    }
    echo ”;
    echo ”;
    }
    [QUOTE]

  44. frank tapia dice:

    Al parecer el problema con este script es que el jquery a usar necesariamente tiene que ser el 1.7 ya que si se ultiliza las ultimas librerias, estas no son compatibles con la funcion live, al no tener la funcion live y ser reemplazada con on o click, al refrescarse el div es como si apareciera un nuevo control que ya no es reconocido por las instruccion inicial.

  45. Salva García dice:

    Probadlo así si tenéis las últimas librerías de jQuery:

    $(“.paginate”).on(‘click’, ‘a’, function()
    {
    $(‘#content’).html(”);

    var page = $(this).attr(“data”);
    var dataString = ‘page=’+page;
    ….

    Lo único que cambia con respecto al original es la forma de iniciar el jQuery. Además meter todo el script (desde hasta ) de la página dentro del propio archivo “pagination.php”

    Saludos!!

  46. oictavio dice:

    cambia la lina del script por

    $(‘.paginate li a’).on(‘click’, function(){

    y ya esta todo ok

  47. Depedros dice:

    Ninguna de estas soluciones funcionará con .on() si nos referimos a $(‘.paginate’), porque el selector .paginate también se genera dinámicamente.

    La solución pasa por referirnos al ancestro inmediato que no se genere dinámicamente, es decir:

    $(‘#content’).on(‘click’, ‘.paginate ul li a’, function () {…});

    Saludos.

  48. Jose Mariani dice:

    Para todos los que tienen el problema de que no pasa d ela primera pagina, es por que estan usando la funcion de jquery : .live Dicha funcion fue sustituida por: .on

    La solución no tan buena, pero que funciona y es sencilla de implementar en solo 2 PASOS es la siguiente:

    PASO 1:
    Reeplazar esta linea: $('.paginate').live('click', function(){

    Por esta: $('.paginate').on('click', function(){

    Nota solo se cambio la palabra .live por .on.

    PASO 2:
    Copiar todo el script, dentro de pajination.php, obviamente de primerito y fuera de las etiquetas de php.

    LISTO! =) saludos a todos.

  49. Yull Veni dice:

    Hola me gustaría agregarle una opción de búsqueda para que el usuario escriba una palabra de búsqueda y se muestre solo los registros que cumplan la condición.

  50. Diego Cordoba dice:

    saludos, logre implementar este proyecto a mi pagina en local, pero solo tengo un pequeño problema, al inicio del archivo pagination.php, yo requiero de una variable que es enviada mediante url, la cual la capturo por medio de un GET asi:

    @$especialidadId = $_GET[‘especialidadId’];
    $query_num_services = mysql_query(“select especialidadNombre from especialidad, tematicas where especialidad.especialidadId='”.$especialidadId.”‘ and tematicas.especialidadId=especialidad.especialidadId”, @$conexion);

    ahora le digo a la pagina que me muestre 3 registros por pagina, la consulta tiene 6 registros, me muestra los tres primeros pero al darle a siguiente no me muestra nada, PERO si a especialidadId le asigno el valor manualmente me funciona a la perfeccion, que podría ser?

  51. Caros Leon dice:

    Y donde mierda esta config.php ???

    Nunca explican bien estos idiotas nada funciona

    CONCHATUMADRE

  52. Felix Ortiz dice:

    se agradece mucho tu ayuda, me sirvio mucho para aprender, ya que estoy empezando con jquery.
    Queria aportar informando que a los que no les envia la informacion de las paginaciones pueden colocar la funcion de esta forma:

    $(‘.paginate a’).live(‘click’, function(){

    por lo menos a mi me funciono asi.

  53. Juan Galarza dice:

    Hola Jose, se que es un tema viejo … pero estoy usando tu ejemplo para poder lograr una paginacion en una web y no logro hacer funcionar los botones del paginador… cuando quiero pasar a otra “page” no funciona el vinculo… que podria estar haciendo mal? use tu codigo y solo reemplace las consultas…

    Saludos

  54. Carlos Nevárez dice:

    Me ha ido de maravilla el tutorial, muchas gracias!

  55. ruben dice:

    Notice: Undefined variable: conexion in C:xampphtdocspaginationincludespagination.php on line 5

    Warning: mysql_query() expects parameter 2 to be resource, null given in C:xampphtdocspaginationincludespagination.php on line 5

    Warning: mysql_num_rows() expects parameter 1 to be resource, null given in C:xampphtdocspaginationincludespagination.php on line 6

    alguien me puede ayudar con ese error ya configure la conexion y nada

    • Jose Aguilar dice:

      Hola, no es un error, es un notice, supongo que la aplicación continua. El mensaje de error da la pista de que están fallando los parámetros de conexión:

      $conexion = mysql_connect(DB_SERVER, DB_SERVER_USERNAME, DB_SERVER_PASSWORD);
      mysql_select_db(DB_DATABASE, $conexion);

      Saludos

  56. Goyo dice:

    Me encantaría poder usar este codigo, pero me salta un error supuestamente relacionado con la base de datos como habeis comentado que no soy capaz de corregir. Se ha dicho que el problema se solucionaba comentando unas lineas de codigo pero a pesar de hacer eso no se resuelve. Alguien que le funcione podria pasar el codigo con los errores corregidos o decirnos como hacer para solucionarlo?
    Gracias
    Saludos

  57. Goyo dice:

    A mi lo que me ocurre es que solo permite pasar de la página 1 a la 2 y en la 2 se para. Alguien podría decirme porque puede ser?
    Saludos.

  58. anderson orozco dice:

    Excelente aporte fue de gran uso para mi sitio, gracias amigo

  59. Daniela dice:

    Hola, mi la lista de la paginacion no me funciona, cuando doy click a un numero no se mueve.
    Inspeccionando el elemento, que se queda en la pagina 1 solo dice esto:

    1
    2
    3
    4
    Siguiente

    No funcionan ningun boton de la paginacion.

    • Drew dice:

      EL post ya es antiguo, pero es una buena base para hacer que funcione, yo me encontré ante varios ajustes por hacer, en primera la versión de jquery, usar .on() en lugar de .live(), y detallitos en el código, etc… pero logré que funcionara, ahora ando ajustando los filtros de categorías y orden, pero aún así, este post me ahorró un buen de trabajo. Gracias al autor!

      Espero que lo hayas resuelto Daniela. Saludos.

  60. Fran dice:

    Hola
    Buen post
    ¿No se puede insertar un botón que permita ir directamente a la última o primera página?
    Gracias
    Saludos

  61. Erick Plaga dice:

    Me gustaria saber comohago para que solo me aparescan 3 5 botones en la parte de abajo ejemplo.

    Anterior 1 2 3.. Siguiente

  62. alejandr dice:

    hola como están tengo este problema 🙁
    mysql_num_rows() expects parameter 1 to be resource boolean given in php

    o No database selected

    estoy a punta de enloquecer si alguien por fa sabe se lo agradesco
    ya que la consulta la estoy haciendo bien el problema se da al momento de seleccionar algun enlace

  63. Daniel Anibal dice:

    Hola Jose, lo he probasdo con todos lo archivos originales y funciona perfecto.

    En el momento el Jquery esta en la versión 3.1.1. ; es posible que puedas actualizar solo el index para que funcione con esta versión, dado que es realmente donde se ejecuta la paginación. Gracias

  64. RoberD dice:

    Hola, estoy intentando aplicar esto a una búsqueda realizada por el usuario. Funciona bien la primer página, pero al entrar en la segunda me dice que no está definida la variable de búsqueda

  65. Maria Alejandra Betancour dice:

    Hola, ante todo muchas gracias por su aporte, tengo un problema, me esta arrojando en siguiente error (Warning: mysql_fetch_array() expects parameter 1 to be resource, boolean given in). Por favor me puede ayudar a solucionar esto.

    • Jose Aguilar dice:

      Hola,

      Para resolver su problema deberá hacer debug en su código. Todo apunta a que la consulta sql no es correcta. Intente hacer un echo de la consulta y ejecutarla en su base de datos para ver si retorna datos o un error.

      Saludos

    • Hola.
      Yo hice unas correcciones a los nombres de las tablas y campos de la página pagination.php, en las lineas 54 a la 64 y pude corregir los errores. Estos son los cambios:

      $query_num_ratings = mysql_query(“SELECT COUNT(*) as num FROM services WHERE service_id=”.$row_services[‘service_id’], $conexion);
      $num_ratings = mysql_result($query_num_ratings, 0, “num”);

      $query_sum_ratings = mysql_query(“SELECT SUM(rating) as sum FROM services WHERE service_id=”.$row_services[‘service_id’], $conexion);

      if(mysql_result($query_sum_ratings, 0, “sum”) > 0)
      $sum_ratings = mysql_result($query_sum_ratings, 0, “sum”);
      else
      $sum_ratings = 0;

      echo $sum_ratings;

      —-
      Adicionalmente, para evitar el error Deprecated, le adicioné la siguiente instrucción en el archivo config.php:
      error_reporting (E_ALL ^ E_DEPRECATED);

      A mí me funcionó, espero que les sirva a uds. también.
      Saludos.

  66. Carlos Manosalva dice:

    Jose, si mi consulta se arma dinámicamente (dependiendo de ciertos criterios que seleccione el usuario en la página php donde se incluye el navegador), ¿en qué cambia tu código?. A propósito, muchas gracias, ha sido muy útil.

  67. Mario Zanetta dice:

    Estimado Jose, mi pregunta es bien básica y de antemano pido disculpas por ello: ¿en el ejemplo que nos estas compartiendo, se leen todos los registros de la base de datos mysql que cumplan la condición de inclusión de una sola vez (independiente que el código los vaya mostrando en paginas de 10 registros), o va leyendo desde la base de datos solamente los 10 registros que se requieren mostrar según la pagina que seleccione el usuario. Si es que es lo primero, es decir se leen todos de una vez, esto sería equivalente a lo que puede hacer el plugin “datatable” o no son equivalentes ? como se entenderá, mi pregunta tiene relación con la carga de memoria ya que si por ejemplo son cientos de registros los que se van a leer, es mas recomendable hacer lecturas parciales y no totales de la base de datos

    Muchas gracias!!

    • Jose Aguilar dice:

      Hola buenas tardes,

      Lógicamente esta aplicación es más óptima que el plugin datatable debido a que las consultas a la base de datos son limitadas. Tan solo debes fijarte en la siguiente consulta que hacemos:

      $query_services = mysql_query(“SELECT service_id, title, description, rating FROM services WHERE status=1 ORDER BY date_added DESC LIMIT $offset, $rowsPerPage”, $conexion);

      Si tienes conocimientos básicos de SQL te darás cuenta en la consulta anterior.

      Saludos

  68. Ivan dice:

    Hola Jose, Muchas Gracias por el Aporte, me gustaria que me ayudaras con la paginacion, puedo avanzar a la pagina 2, pero una vez ahi, no me puedo devoler a la 1 o a otra, sabes la forma de remediar eso…. espero me puedas ayudar.

    • Jose Aguilar dice:

      Hola buenos días,

      Por algún motivo que desconocemos no se copiaron bien los class de los enlaces de la paginación. Prueba a añadir el class=”paginate” en todos los enlaces de la paginación. Hemos corregido la entrada por si te sirve de ayuda.

      Saludos

  69. José Luis dice:

    buen día a todos excelente aporte, implemente este paginador para una web en la que estoy trabajando, pero no me funciono, a continuación les explico los problemas que se presentaron y como los fui solucionando para que funcionara al 100%, la solución fue leer todos los comentarios de este post y de ahi partir para ir probando hasta hacerla funcionar del todo.
    Primero los problemas:
    1 – los botones no funcionaban.
    2 – primera pagina cargaba bien, pero al seleccionar otro nunca cargaba solo la imagen de loading.
    3 – solo avanzaba una pagina, después no funcionaban los botones.

    ahora si las soluciones
    1 – yo utilizo una versión de jQuery actual, para solucionar este problema cambie la linea – > $(‘.paginate’).live(‘click’, function () { por esta otra linea $(‘.paginate’).on(‘click’, function () { *Nota: esta solución la dieron muchas personas, hasta el mismo autor
    2 – bien en este punto lo que a mi me funciono fue que al realizar la conexión a la BD utilizaba un “require_once” de la siguiente manera -> require_once “config/conexion.php”; la solución fue poner la ruta completa del archivo en el “require_once” -> require_once “C:/xampp/htdocs/config/conexion.php”; *Nota: estoy trabajando en localhost
    3 – aquí la solución fue en nuevamente modificar la linea que se menciono en el punto 1 de este comentario -> $(‘.paginate’).on(‘click’, function () { la modificación que se le hizo es la siguiente -> $(‘#content’).on(‘click’, ‘.paginate’, function () {

    con esto me funciono la paginacion al 100% ningún error

  70. hackerman dice:

    No sirvio esta basura…
    Prueben esto y dejen de sufrir:
    https://github.com/wikiti/jquery-paginate

  71. rafa dice:

    Hola!! me encanta tu página, gracias por todo lo que nos enseñas. Tengo un problema y es que necesito paginar comentarios y respuestas con msqly y pdo …he intentado aplicar todos los ejemplos que tienes pero no me funciona ninguno..¿Me puedes ayudar?
    Gracias y saludos

  72. Esmeralda dice:

    saludos, logre implementar este proyecto a mi pagina en local, pero solo tengo un pequeño problema, al inicio del archivo pagination.php, yo requiero de una variable que es enviada mediante url, la cual la capturo por medio de un GET asi:

    $segmento = $_GET[‘segmento’];
    $query_num_services = mysql_query(“select SegmentoNombre from segmento, tematicas where segmento=’”.$segmento.”‘ and tematicas.segmento=segmento”, @$conexion);

    ahora le digo a la pagina que me muestre 5 registros por pagina, la consulta tiene 6 registros, me muestra los 5 primeros pero al darle a siguiente no me muestra nada, PERO si a la consulta le agrego el valor manualmente me funciona a la perfeccion, que podría ser?

  73. Erick dice:

    cargue tu ejemplo y cuando esta en la primera paginación, no muestra la navegación.

  74. Erick dice:

    parece que el error es cuando inicia es que le asignas :
    $pageNum = 1;
    y en el if de la paginación le dices:
    if ($pageNum != 1)

  75. Larry dice:

    Exelente tutorial amigo, me salvaste de una que necesité para un proyecto. Muchas gracias. Dígame dónde puedo hacerle humildemente un reconocimiento a su labor. Soy Larry franco de colombia (sigelip@gmail.com) watsapp 57 3136619782

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.