1

buenas tardes a todos. Les comento, estoy creando un blog y tengo un problema trabajando con la paginacion de mi sitio. Como estoy pasando por get la variable de la pagina en la que me encuentro, mi sitio se recarga asi que los estilos de mi paginacion nunca cambia (Siempre mantiene el primer elemento como active)

Les voy compartiendo y comentando el codigo

$(document).ready(function () {
  var pageItem = $('.pagination li').not('.prev,.next');
  var prev = $('.pagination li.prev');
  var next = $('.pagination li.next');

  prev.addClass('disabled');
  pageItem.first().addClass('active');

  pageItem.click(function () {
    pageItem.removeClass('active');
    $(this).not('.prev,.next').addClass('active');

    if ($(this).next().hasClass('next')) {
      next.addClass('disabled');
      prev.removeClass('disabled');
    } else {
      next.removeClass('disabled');
    }

    if ($(this).prev().hasClass('prev')) {
      prev.addClass('disabled');
      next.removeClass('disabled');
    } else {
      prev.removeClass('disabled');
    }
  });

  next.click(function () {
    $('li.active').removeClass('active').next().addClass('active');

    if (next.prev().hasClass('active')) {
      next.addClass('disabled');
      prev.removeClass('disabled');
    } else {
      prev.removeClass('disabled');
    }
  });

  prev.click(function () {
    $('li.active').removeClass('active').prev().addClass('active');

    if (prev.next().hasClass('active')) {
      prev.addClass('disabled');
      next.removeClass('disabled');
    } else {
      next.removeClass('disabled');
    }
  });
});
.pagination {
  text-align: center;
  margin-top: 50px;
  margin-bottom: 15px;
}
.pagination li {
  display: inline-block;
  padding: 10px 15px;
  border-radius: 10px;
  transition: background-color 0.5s;
}
.pagination li a {
  text-decoration: none;
  font-size: 15px;
  color: #7c3c01;
}
.disabled {
  pointer-events: none;
}
.disabled a span {
  color: #000000;
}
.active {
  background-color: #e99d57;
  color: #633001;
}
.pagination li:hover:not(.active) {
  background-color: #f0b680;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<nav aria-label="Page navigation">
        <ul class="pagination">
            <li class="prev">
                <a href="#" aria-label="Anterior">
                    <span aria-hidden="true">&laquo;</span>
                </a>
            </li>
            <!--
            <?php
            Este es mi codigo php para traer las entradas de la db
            // PAGINACION
            $total_art = mysqli_num_rows($entradas);
            $art_x_page = 4;
            $pages = ceil($total_art / $art_x_page);

            for ($i = 0; $i < $pages; $i++) : ?>
                <li>
                    <a href="index.php?pagina=<?= $i + 1; ?>"><?= $i + 1; ?></a>
                </li>
            <?php endfor; 
            
            Para mostrar los estilos agregare li estaticos
            ?>
            -->
                <li>
                    <a href="#">1</a>
                </li>
                <li>
                    <a href="#">2</a>
                </li>
                <li>
                    <a href="#">3</a>
                </li>

            <li class="next">
                <a href="#" aria-label="Siguiente">
                    <span aria-hidden="true">&raquo;</span>
                </a>
            </li>
        </ul>
    </nav>

Vean que mis estilos cambian perfectamente, pero cuando les paso la variable de la pagina, la misma se recarga y siempre me muestra el primer elemento como active...

No se si hay alguna manera de pasar la variable y actualizar la pagina sin recargar o de modificar los estilos una vez recargada la pagina, este proyecto lo estoy haciendo lo mas vanilla posible, como libreria solo estoy usando JQuery, despues es todo código escrito por mi, asi que acepto cualquier sugerencia. Muchas gracias y quedo a la orden ante cualquier consulta!

2
  • 2
    Para que la página no se recargue tendrías que usar Ajax, así podrías mandar/recibir datos del servidor y mostrarlos sin tener que recargar la página en cada envío. Aquí hay varias respuestas que explican cómo funciona Ajax.
    – A. Cedano
    Commented el 14 jun. 2020 a las 19:29
  • Investigare entonces, muchas gracias! Commented el 14 jun. 2020 a las 20:24

1 respuesta 1

1

Si el problema es que la pagina seleccionada no tiene la clase active, entonces podrías tomar los parámetros GET con JavaScript así:

var search = location.search.replace("?", "").split("&");

var parametros = {};

for (var x in search) {
    var s = search[x].split("=");

    var indice = s[0];
    var valor = s[1];

    parametros[indice] = valor;
}

Ahora a ti te interesa el parámetro GET pagina, con el código anterior podrías tomarlo y con ese valor en JQuery podrías agregarle la clase active:

var pagina = parametros.pagina;

$(".pagination li").eq(pagina).addClass("active");

Inclusive puedes hacerlo con PHP sin necesidad de tomar los parámetros GET con JavaScript:

<script>
    var pagina = <?php echo (isset($_GET["pagina"]) ? $_GET["pagina"] : ""); ?>;

    if (pagina) {
        $(".pagination li").eq(pagina).addClass("active");
    }
</script>

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.