Regresar a la página www.ComoCrearTuWeb.com
Resultados 1 al 8 de 8

Tema: Problema con paginación de resultados en AJAX

  1. #1
    Esto empieza a ser un vicio... Habitante Avatar de Doodleo
    Fecha de Ingreso
    25 abr, 11
    Ubicación
    Galicia (España)
    Mensajes
    1,329
    Poder de Reputación
    17

    Problema con paginación de resultados en AJAX

    Hola:

    Estoy intentando paginar resultados de una base de datos con AJAX para no tener que andar actualizando la página mientras se navega por los registros de esta. Cuando cambio de página por primera vez, funciona todo a la perfección. Pero cuando el contenido carga los botones de navegación pasan a no funcionar (se muestran pero por mucho que hagas click no cambia de página).

    Os dejo los códigos a ver si alguien se da cuenta de qué pasa:

    paginador.php
    Código PHP:
    <?php

    // ... conexión a la base de datos ...

    echo '<table>
              <thead>
                <tr>
                  <th scope="col">título</th>
                  <th scope="col">contenido</th>
                  <th scope="col">fecha</th>
                  <th scope="col">opciones</td>
                </tr>
              </thead>
              <tbody>'
    ;

    $result $mysqli->query("SELECT * FROM tabla ORDER BY id DESC");
    $count $result->num_rows;

    if(
    $count 0){
      
    $rowsPerPage 2;
      
    $pageNum 1;

      if(isset(
    $_GET['page'])) $pageNum $_GET['page'];

      
    $offset = ($pageNum 1) * $rowsPerPage;
      
    $total_paginas ceil($count $rowsPerPage);
      
    $result $mysqli->query("SELECT * FROM tabla ORDER BY id DESC LIMIT $offset$rowsPerPage");

      while(
    $row $result->fetch_array()){ 
        
    $titulo $row['titulo'];
        
    $contenido $row['contenido'];
        
    $fecha $row['fecha'];

        echo 
    "<tr>
                  <td>
    $titulo</td>
                  <td>
    $contenido</td>
                  <td>
    $fecha</td>
                  <td>acciones</td>
                </tr>"
    ;
      }

      echo 
    '</tbody>
              <tfoot>
                <tr>
                  <td>
                    <div class="pagination">
                      <ul>'
    ;

      if(
    $pageNum != 1)  echo '<li><a class="navigate-link" data="'.($pageNum-1).'">Anterior</a></li>';

      for(
    $i=1$i <= $total_paginas$i++){
        if (
    $pageNum == $i)
          echo 
    '<li class="active"><a class="navigate-link" data="'.$i.'">'.$i.'</a></li>';
        else
          echo 
    '<li><a class="navigate-link" data="'.$i.'">'.$i.'</a></li>';
      }

      if (
    $pageNum != $total_paginas)  echo '<li><a class="navigate-link" data="'.($pageNum+1).'">Siguiente</a></li>';
     
      echo 
    '</ul>
            </div>
          </td>
          <td colspan="5" style="text-align: right;">texto derecha</td>
        </tr>
      </tfoot>
    </table>'
    ;

    }

    ?>
    script para la paginación
    Código:
        $(document).ready(function() {    
          $('.pagination ul li a').click(function(){
            $('#content').html('Cargando...');
    
    
            var page = $(this).attr('data');        
            var dataString = 'page='+page;
    
    
            $.ajax({
                type: "GET",
                url: "paginador.php",
                data: dataString,
                success: function(data) {
                  $('#content').html(data);
                }
            });
        });
    });
    en el html simplemente incluyo paginador.php
    Última edición por Doodleo; 20/05/2014 a las 19:13

  2. #2
    Esto empieza a ser un vicio... Habitante
    Fecha de Ingreso
    02 may, 11
    Ubicación
    Santiago, Chile
    Mensajes
    2,047
    Poder de Reputación
    21
    Hola!

    jQuery añade los listeners sólo a los elementos actuales del documento. Cuando utilizas AJAX para cargar contenido, jQuery no ha añadido los listeners a este nuevo contenido, por lo que no funcionarán. Si muestras un mensaje por consola (console.log("mensaje")) al hacer clic, probablemente verás que el contenido sólo se ejecuta la primera vez, pues las demás veces no existen los listeners.

    Para solucionar el problema debes utilizar live (para jQuery < 1.7 si es que no me equivoco) u on (para las versiones más nuevas):

    Código:
    $(document).ready(function() {    
          $('.pagination ul li a').[live|on]('click', function(){
            $('#content').html('Cargando...');
    
    
            var page = $(this).attr('data');        
            var dataString = 'page='+page;
    
    
            $.ajax({
                type: "GET",
                url: "paginador.php",
                data: dataString,
                success: function(data) {
                  $('#content').html(data);
                }
            });
        });
    });
    [live|on] reemplaza eso por live u on, no el cuadro completo :).

    Ahora sí debería funcionar.

  3. #3
    Esto empieza a ser un vicio... Habitante Avatar de Doodleo
    Fecha de Ingreso
    25 abr, 11
    Ubicación
    Galicia (España)
    Mensajes
    1,329
    Poder de Reputación
    17
    Muchas gracias, no sabía que on reemplazaba a live (ahora entiendo por qué me daba error al utilizarlo) :)

    Desafortunadamente, sigue ocurriendo lo mismo. La primera vez funciona pero después los enlaces pasan a estar inactivos :(
    Última edición por Doodleo; 20/05/2014 a las 10:57

  4. #4
    Esto empieza a ser un vicio... Habitante
    Fecha de Ingreso
    02 may, 11
    Ubicación
    Santiago, Chile
    Mensajes
    2,047
    Poder de Reputación
    21
    Hmmm, vas a tener que debuggear :P.

    Pon unos echo/console.log() para mostrar las variables importantes. En el código jQuery, envía los parámetros como objetos en lugar de un string, así:

    Código:
    $(document).ready(function() {    
          $('.pagination ul li a').[live|on]('click', function(){
            $('#content').html('Cargando...');
    
            var page = $(this).attr('data');   
            console.log("Cargar página: " + page);
            var dataString = { 'page': page };
    
    
            $.ajax({
                type: "GET",
                url: "paginador.php",
                data: dataString,
                success: function(data) {
                  $('#content').html(data);
                }
            });
        });
    });
    Y modifiqué un poco el paginador (Haz un respaldo de tu código antes de usar las modificaciones):

    Código PHP:
    <?php

    # la conexión a la base de datos va aquí (omito ponerla para no cargar esto de más código innecesario pues este no es el problema)

    echo '<table>
            <thead>
             <tr>
                <th scope="col">título</th>
                <th scope="col">contenido</th>
                <th scope="col">fecha</th>
                <th scope="col">opciones</td>
              </tr>
            </thead><tbody>'
    ;

    $pageNum 0;
    $rowsPerPage 2;

    // Puesto que se espera un número y los parámetros se pasan por GET,
    // mejor validas que realmente sea un número y no un string (que podría
    // ser una inyección SQL)
    if( isset( $_GET['page'] ) && is_numeric$_GET['page'] ) ) {
        
    $pageNum $_GET['page'];
    }

    // La primera vez será 0 * 2 = 0, por ende comenzará en la fila 0
    // La segunda vez será 1 * 2 = 2, entonces comenzará en la fila 2
    // y así sucesivamente.
    $offset $pageNum $rowsPerPage;
    $result $mysqli->query("SELECT * FROM tabla ORDER BY id DESC LIMIT $offset$rowsPerPage");
    $count $result->num_rows;
    $total_paginas ceil$count $rowsPerPage );
    echo 
    "<script type=\"text/javascript\">console.log(\"Current page: $pageNum; offset: $offset; Rows per page: $rowsPerPage; Result count: $count; Total pages: $total_paginas.\");</script>";

    if(
    $count 0){
        while (
    $row $result->fetch_array()) { 
          
    $titulo $row['titulo'];
          
    $contenido $row['contenido'];
          
    $fecha $row['fecha'];
          echo 
    "<tr>
                    <td>
    $titulo</td>
                    <td>
    $contenido</td>
                    <td>
    $fecha</td>
                    <td>acciones</td>
                  </tr>"
    ;
         }
        echo 
    '</tbody>
                <tfoot>
                  <tr>
                    <td>'
    ;
       echo 
    '<div class="pagination"><ul>';
        if (
    $pageNum != 1)        echo '<li><a class="navigate-link" data="'.($pageNum-1).'">Anterior</a></li>';
            for (
    $i=1$i <= $total_paginas$i++) {
              if (
    $pageNum == $i)
                echo 
    '<li class="active"><a class="navigate-link" data="'.$i.'">'.$i.'</a></li>';
              else
                echo 
    '<li><a class="navigate-link" data="'.$i.'">'.$i.'</a></li>';
         }
            if (
    $pageNum != $total_paginas)          echo '<li><a class="navigate-link" data="'.($pageNum+1).'">Siguiente</a></li>';        echo '</ul></div></td>';
            echo 
    '        <td colspan="5" style="text-align: right;">texto derecha</td>
              </tr> 
           </tfoot></table>'
    ;}
    ?>

  5. #5
    Esto empieza a ser un vicio... Habitante Avatar de Doodleo
    Fecha de Ingreso
    25 abr, 11
    Ubicación
    Galicia (España)
    Mensajes
    1,329
    Poder de Reputación
    17
    Por unos problemas en el servidor no puedo acceder al panel de control y por tanto a modificar los archivos, espero tenerlo lo antes solucionado para probar a ver qué dice la consola y demás, en cuanto pueda mostraré aquí los resultados.

    Muchas gracias por tu ayuda skaparate :)

  6. #6
    Esto empieza a ser un vicio... Habitante Avatar de Doodleo
    Fecha de Ingreso
    25 abr, 11
    Ubicación
    Galicia (España)
    Mensajes
    1,329
    Poder de Reputación
    17
    Cambiando los códigos por cómo me dijiste sólo me detecta que hay una página de resultados XD
    Código:
    Current page: 0; offset: 0; Rows per page: 2; Result count: 2; Total pages: 1.
    Creo que se debe a que calcula todo en base a los registros limitados (lo hace teinendo en cuenta el LIMIT $offset, $rowsPerPage), le he añadido los console.log a los códigos actuales (tuve que hacerles modificaciones [por ejemplo, lo de las SQLi] aunque siguen funcionando igual), y la primera vez carga todo bien, pero al clickar después sobre los enlaces no muestra nada en la consola.

    Dejo el archivo jQuery con AJAX:
    Código HTML:
    $(document).ready(function() {  
    
    
        $('.pagination-enlace').on('click', function(){
          var page = $(this).attr('data');
          var dataString = { 'page': page };
          console.log("Cargar página: " + page);
          $.ajax({
                type: "GET",
                url: "paginador.php",
                data: dataString,
                success: function(data) {
                  $('#content').html(data);
                }
            });
        });
        
        $('#pagination').change(function(){
          var $page = $(this).find('option:selected');
          var selectedValue = $page.val();
          console.log("Cargar página: " + selectedValue);
          var dataString = { 'page': selectedValue };
          $.ajax({
                type: "GET",
                url: "paginador.php",
                data: dataString,
                success: function(data) {
                  $('#content').html(data);
                }
            });
        });
        
    });
    Ahora utilizo un select para elegir la página y al cambiar de opción cambia de página (como dije antes, pasa lo mismo, la primera vez funciona bien y luego es como si estuviera inactivo). Esta es la parte final del código donde creo los enlaces de paginación:
    Código:
      echo '</tbody><tfoot>
               <tr>
                 <td><div id="btn-pagination-group">';
                 if ($pageNum != 1)
                   echo '<a class="pagination-enlace btn-pagination" data="'.($pageNum-1).'">ANTERIOR</a>';
            echo '<select style="height: 30px;" class="btn-pagination" name="pagination" id="pagination">';
            for ($i=1; $i <= $total_paginas; $i++) {
              if ($pageNum == $i)
                echo '<option selected>'.$i.'</option>';
              else
                echo '<option value="'.$i.'">'.$i.'</option>';
            }
            echo '</select>';
           if ($pageNum != $total_paginas)
              echo '<a class="pagination-enlace btn-pagination" data="'.($pageNum+1).'">SIGUIENTE</a>';
            echo '</div></td>
                  <td colspan="5" style="text-align: right;"><em>texto derecha</em></td>
              </tr>
            </tfoot></table>';
    De esta manera, al cargar la página el console.log dice (hay 7 registros en la base de datos):
    Current page: 1; offset: 0; Rows per page: 2; Result count: 7; Total pages: 4.


    Al cambiar a la página 3 por ejemplo:
    Cargar página: 3
    Current page: 3; offset: 4; Rows per page: 2; Result count: 7; Total pages: 4.
    El PHP funciona bien en todas las páginas, así que el error debe estar en el script. Me parece raro que deje de estar activo después de hacer click.
    Última edición por Doodleo; 21/05/2014 a las 16:37

  7. #7
    Esto empieza a ser un vicio... Habitante Avatar de Doodleo
    Fecha de Ingreso
    25 abr, 11
    Ubicación
    Galicia (España)
    Mensajes
    1,329
    Poder de Reputación
    17
    He probado a hacer una cosa que me pareció que no funcionaría pero sí, ha funcionado y ahora va a la perfección!!
    En vez de poner el script en la página donde incluyo el archivo paginador.php, lo he puesto como un echo en paginador.php
    Código:
    echo '<script type="text/javascript">
    $(document).ready(function() {  
    
    
        $(".pagination-enlace").on("click", function(){
          var page = $(this).attr("data");
          var dataString = { "page": page };
          console.log("Cargar página: " + page);
          $.ajax({
                type: "GET",
                url: "paginador.php",
                data: dataString,
                success: function(data) {
                  $("#content").html(data);
                }
            });
        });
        
        $("#pagination").change(function(){
          var $page = $(this).find("option:selected");
          var selectedValue = $page.val();
          console.log("Cargar página: " + selectedValue);
          var dataString = { "page": selectedValue };
          $.ajax({
                type: "GET",
                url: "paginador.php",
                data: dataString,
                success: function(data) {
                  $("#content").html(data);
                }
            });
        });
        
    });
        </script>';
    Y ahora sí funciona bien todo el rato :)
    Muchas gracias por la ayuda skaparate!!

  8. #8
    Esto empieza a ser un vicio... Habitante
    Fecha de Ingreso
    02 may, 11
    Ubicación
    Santiago, Chile
    Mensajes
    2,047
    Poder de Reputación
    21
    Me alegro de que lo hayas resuelto :).

    Saludos!

Temas Similares

  1. [Aporte] Paginación de Resultados SQL
    Por skaparate en el foro Php Bases de Datos y MySQL (Nuevo!)
    Respuestas: 1
    Último Mensaje: 30/01/2014, 02:02
  2. Problema al paginar resultados de la base de datos con AJAX
    Por Doodleo en el foro Php Bases de Datos y MySQL (Nuevo!)
    Respuestas: 2
    Último Mensaje: 19/12/2011, 14:02
  3. Paginar resultados de la base de datos con AJAX
    Por Doodleo en el foro Php Bases de Datos y MySQL (Nuevo!)
    Respuestas: 9
    Último Mensaje: 28/11/2011, 14:27
  4. Paginacion de material que ponga yo, no de resultados.
    Por CardiaKO en el foro Foro General
    Respuestas: 0
    Último Mensaje: 02/09/2010, 20:49

Permisos de Publicación

  • No puedes crear nuevos temas
  • No puedes responder temas
  • No puedes subir archivos adjuntos
  • No puedes editar tus mensajes
  •