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">«</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">»</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!