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 - Director ejecutivo y tecnológico en JA Modules. Experto programador PrestaShop y Experto programador WordPress.
Te ha servido? Valora esta entrada!
(51 votos, promedio: 5 de 5)
Comparte en las redes sociales

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

  1. Jaime dice:

    Hola.
    De antemano muchas gracias por la guía.

    Una pregunta. Cómo puedo hacer que una vez esté en la página #3, cuando recargue la página me siga mostrando los resultados de la página #3

  2. SEBASTIAN dice:

    HOLA ME FUNCIONO TU ENTRADA MUCHAS GRACIAS.
    PERO TENGO UNA PREGUNTA

    ¿COMO PUEDO METER LOS BOTONES DE SIGUIENTE Y ANTERIOR EN LA PAGINACION Y QUE AL SELECCIONARLOS NOS PASE A LA SIGUIENTE PAGINA PERO SIN ACTUALIZAR TODA LA PAGINA?

    ESPERO QUE ME PUEDAS AYUDAR

    GRACIAS

  3. larry franco dice:

    Buenos días, he intentado adpatar este ejemplo pero llevado a arquitectura MVC y el $_GET[‘page] devueto por el ajax no es reconocido dentro del controlador; por lo que la paginación no me funciona y genera error.
    algo así he ehecho en el controllers:
    $news=new Noticias();
    $html = »;

    $NUM_ROWS=$news->num_rows();

    $page = $_GET[‘page’];
    $rowsPerPage = NUM_ITEMS_BY_PAGE;
    $offset = ($page – 1) * $rowsPerPage;

    sleep(1);

    if ($NUM_ROWS > 0) {
    foreach ($news->_search($offset,$rowsPerPage) as $row) {
    $html .= »;
    $html .= »;
    $html .= »;
    $html .= ».utf8_encode($row[‘NTNOT_Titulo’]).»;
    $html .= ».strip_tags(utf8_encode($row[‘NTNOT_Descripcion’])).»;
    $html .= ».($row[‘NTNOT_fecha’]).’ ‘;
    $html .= ‘ Ver’;
    $html .= »;
    $html .= »;
    }
    }

    echo $html;
    }

    • Jose Aguilar dice:

      Hola,

      Te recomiendo que hagas echos o imprimas la consulta que estás intentando hacer y ejecutarla directamente en la base de datos para ver si da algún problema. Para que el parámetro get sea reconocido debes crear una llamada Ajax con el metodo get.

      Saludos

  4. isaias dice:

    tengo un problema al mostrar los registro «me pueden apollar como es la estructura de la base de datos que campos»

    • Jose Aguilar dice:

      Hola,

      Gracias por tu mensaje.

      La estructura de la base de datos la puedes localizar en una instalación limpia de PrestaShop. En este caso, lo ideal es que adaptes este código a tu base de datos cambiando las consultas pero manteniendo los límites de la paginación.

      Saludos

  5. Daniel dice:

    esta padre la paginacion peo como se podria hacer esto

    1 2 3 4 5 6 … > 500
    1 … > 495, 496, 497, 498, 499, 500

  6. isaias dice:

    Fatal error: Call to a member function fetch_assoc() on boolean in C:\xampp\htdocs\paginacion\index.php on line 4

  7. isaias dice:

    me marca ese error ayuda x favor
    Fatal error: Call to a member function fetch_assoc() on boolean in C:\xampp\htdocs\paginacion\index.php on line 4

  8. 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

  9. 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)

  10. Erick dice:

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

  11. 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?

  12. 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

  13. hackerman dice:

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

  14. 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

  15. 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

  16. 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

  17. 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.

  18. 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

    • Oliver Silgado dice:

      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.

  19. 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

  20. 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

  21. 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

  22. 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

  23. 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

  24. 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.

  25. anderson orozco dice:

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

  26. 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.

  27. 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

  28. 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

  29. Carlos Nevárez dice:

    Me ha ido de maravilla el tutorial, muchas gracias!

  30. 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

  31. 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.

  32. Caros Leon dice:

    Y donde mierda esta config.php ???

    Nunca explican bien estos idiotas nada funciona

    CONCHATUMADRE

  33. 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?

  34. 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.

  35. 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.

  36. 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.

  37. oictavio dice:

    cambia la lina del script por

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

    y ya esta todo ok

  38. 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!!

  39. 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.

  40. 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]

  41. 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(){

  42. 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 » «;

  43. alberto dice:

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

  44. 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

  45. 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.

  46. 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

  47. 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.

  48. 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

  49. 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

  50. 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.

  51. HUGO dice:

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

  52. 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!

  53. 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

  54. 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

  55. 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

  56. 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!

  57. 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.

  58. Vladimir dice:

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

  59. 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…

  60. 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?

  61. 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?

  62. 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

  63. 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

  64. Alex dice:

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

  65. 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??

  66. 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.

  67. cdwl dice:

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

  68. 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

  69. emilio dice:

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

  70. rody dice:

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

  71. MORGAN HUASCAR dice:

    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

  72. 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

  73. ing ulises dice:

    muy buen código gracias amigo

  74. 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

  75. 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.

  76. 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.

  77. Magnus dice:

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

  78. Francisco dice:

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

  79. 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…..

  80. Helder dice:

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

  81. 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.

  82. 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?

Deja una respuesta

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.