0

estoy haciendo una paginación de resultados con AJAX para que el usuario pueda cargar los comentarios de mi sitio de manera más dinámica, para ello he realizado una paginación simple en PHP primero, y luego utilizo AJAX para mostrar los resultados sin recargar la pagina, el problema que tengo es que al momento de hacer click en mi enlace VER MAS me muestra los mismos resultados iniciales, osea me duplica el contenido una y otra vez, donde debería mostrarme los siguientes resultados que están en mi tabla.

Esta es la lógica de la paginación con PHP:

$results_por_pag = 4;
 if (isset($_GET['pagina'])) {
    if($_GET['pagina']==1){
     $pagina_actual = 1;
    }else{
     $pagina_actual = $_GET['pagina'];
    }
 } else {
    $pagina_actual = 1;
 }

 $inicio = ($pagina_actual-1)*$results_por_pag;

 $sql = $db->prepare("SELECT * FROM comentarios");
 $sql->execute(array));
 $num_registros = $db->rows($sql);
 $total_paginas = ceil($num_registros/$results_por_pag);

 $sql2 = $db->prepare("SELECT * FROM comentarios ORDER BY id_comentario DESC LIMIT $inicio,$results_por_pag"); 
 $sql2->execute();

AQUI ES EL AREA EN DONDE MUESTRO LOS RESULTADOS:

<div id="commentss" class="commentss">
 <?php
  if($db->rows($sql2)>0){
    echo '<h3 id="comments">COMENTARIOS REALIZADOS</h3>';
    echo '<div class="comentarios">';
    while($key = $db->recorrer($sql2)){ ?>  
     <ol class="commentlist" id="commentlist">
      <li class="comment">
        <div id="comment-2">
          <div class="comment-author vcard">
           <img alt="" src="images/avatar.png" class="avatar photo">
           <cite class="fn"><?php echo $key['nombre'] ?></cite>
          </div>
          <div class="comment-meta commentmetadata">
           <a href="#"><?php echo $key['date_'] ?></a>
           <a class="comment-edit-link" href="#">(Edit)</a>
          </div>
          <p><?php echo $key['comentario'] ?></p>
        </div>
      </li>
     </ol>
  <?php }
  echo '</div>';
   } else { ?> 
    <h3 id="comments">NO HAY COMENTARIOS</h3>
   <?php } ?>
 </div>

PAGINACION

 <nav class="pagination">
  <ul class="pagination-sm">
   <li class="page-item">
     <?php 
      for ($i=1; $i<=$total_paginas; $i++) { ?> 
        <a href="?pagina=<?php echo $i ?>"><?php echo $i ?></a>
       <?php } ?>
   </li>
  </ul>
 </nav>

SCRIPT CON AJAX:

$(".pagination").hide();
//Creamos el link de ver mas
$(".pagination").after('<center><div class="view-mas"><a href="#" class="btn btn-fullcolor btn-skewed">VER MÁS</a></div></center>');
//Buscar Nuevos resultados con Ajax
$(".view-mas a").on('click',function(e){
    e.preventDefault();
    $.ajax({
        type:'GET',
        url: $('nav.pagination ul li a').attr('href'),
        success:function(html){
            //Obtener registros nuevos
            var nuevos_registros = $(html).find("div.comentarios"),
                nueva_paginacion = $(html).find(".pagination"),
                elemento         = $("div.comentarios");
            //Agregar nuevos registros
            elemento.append(nuevos_registros.html());
            //Actualizar link de ver mas
            elemento.after(nueva_paginacion.hide());
        }
    });
});

Y este es el resultado cuando presiono VER MAS:

introducir la descripción de la imagen aquí

Como pueden ver, los resultados se me repiten, y lo que se quiere es que se muestren los siguientes 4 y así sucesivamente.

Le he dado muchas vueltas y creo que lo que esta pasando es que no estoy accediendo a los enlaces que me contienen el numero de pagina, pero en realidad no e podido resolver este problema

4
  • En donde estan los enlaces que contienen el numero de pagina?
    – alanfcm
    Commented el 13 abr. 2018 a las 22:33
  • En donde dice PAGINACION, alli estan los enlaces creados por un ciclo for Commented el 13 abr. 2018 a las 22:38
  • Pero tu handler es para el boton Ver Mas, y no para la paginacion. En tu hanlder nunca pasas el parametro "pagina"
    – alanfcm
    Commented el 13 abr. 2018 a las 22:40
  • Si te fijas el foco esta en el boton ver mas, porque dentro del ajax trato de acceder en el parametro url: a los enlaces que contienen los numero de pagina. Commented el 13 abr. 2018 a las 22:44

1 respuesta 1

1

Tu problema esta en esta linea:

url: $('nav.pagination ul li a').attr('href'),

Ese selector siempre te va a regresar la primera instancia, o sea la pagina 1. Lo que necesitas hacer es tener una clase "activa" en tus links de paginacion y usar esa clase asi:

url: $('nav.pagination ul li a.activa').attr('href'),

Cada vez que la pagina cambie cuando el usuario hace click en una de las paginas, simplemente asigna esa clase en el handler de la pagina actual asi:

$(".view-mas a").on('click',function(e){
    $('nav.pagination ul li a.activa').removeClass("activa").next().addClass("activa");
    e.preventDefault();
    $.ajax({
        type:'GET',
        url: $('nav.pagination ul li a.activa').attr('href'),
        success:function(html){
            //Obtener registros nuevos
            var nuevos_registros = $(html).find("div.comentarios"),
            nueva_paginacion = $(html).find(".pagination"),
            elemento         = $("div.comentarios");
            //Agregar nuevos registros
            elemento.append(nuevos_registros.html());
            //Actualizar link de ver mas
            elemento.after(nueva_paginacion.hide());
        }
    });
});

No he probado este codigo, pero quiza tengas que hacer algunas modificaciones, como aumentar uno a la pagina cada vez que se presiona el buton.

3
  • Ok entiendo @alanfcm. Estoy tratando de plasmarlo pero no logro hacerlo, si puedes ayudarme te lo agradeceria Commented el 13 abr. 2018 a las 23:08
  • ya edite mi respuesta
    – alanfcm
    Commented el 13 abr. 2018 a las 23:30
  • Bien, he hecho lo del aumento al presionar el boton, y todo a andado bien. Gracias Commented el 14 abr. 2018 a las 0:40

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.