fix: ahora no hace autoscroll hacia arriba

This commit is contained in:
2025-04-07 14:55:37 -03:00
parent eadeeb2b08
commit 483a2b5409

View File

@@ -1,18 +1,18 @@
<script lang="ts">
import { onMount } from "svelte";
import { onMount } from "svelte";
let {
currentPag,
cantpag,
queryPag,
centrado = false,
}: {
currentPag: number;
cantpag: number;
queryPag: (a: number) => void;
centrado: boolean;
} = $props();
let {currentPag,
cantpag,
queryPag,
centrado = false
}:{
currentPag: number,
cantpag: number,
queryPag: (a:number) => void,
centrado:boolean
} = $props();
function getVisiblePages() {
function getVisiblePages() {
if (!centrado || cantpag <= 5) {
return Array.from({ length: cantpag }, (_, i) => i + 1);
}
@@ -20,28 +20,56 @@
if (currentPag <= 3) {
return [1, 2, 3, 4, 5];
} else if (currentPag >= cantpag - 2) {
return [cantpag - 4, cantpag - 3, cantpag - 2, cantpag - 1, cantpag];
return [
cantpag - 4,
cantpag - 3,
cantpag - 2,
cantpag - 1,
cantpag,
];
} else {
return [currentPag - 2, currentPag - 1, currentPag, currentPag + 1, currentPag + 2];
return [
currentPag - 2,
currentPag - 1,
currentPag,
currentPag + 1,
currentPag + 2,
];
}
}
let visiblePages = $derived.by(getVisiblePages);
</script>
{#if cantpag > 1}
<nav aria-label="Paginador">
<ul class="pagination">
<li class="page-item {currentPag === 1 ? 'disabled' : ''}">
<a class="page-link" href="#" onclick={() => currentPag > 1 && queryPag(currentPag - 1)}>Anterior</a>
</li>
{#each visiblePages as num }
<li class="page-item"><a class="page-link" class:active={currentPag === num} href="#" onclick={()=>queryPag(num)}>{String(num)}</a></li>
{/each}
<li class="page-item {currentPag === cantpag ? 'disabled' : ''}">
<a class="page-link" href="#" onclick={() => currentPag < cantpag && queryPag(currentPag + 1)}>Siguiente</a>
</li>
</ul>
</nav>
{/if}
<nav aria-label="Paginador">
<ul class="pagination">
<li class="page-item {currentPag === 1 ? 'disabled' : ''}">
<button
class="page-link"
onclick={() => currentPag > 1 && queryPag(currentPag - 1)}
>
Anterior
</button>
</li>
{#each visiblePages as num}
<li class="page-item">
<button
class="page-link"
class:active={currentPag === num}
onclick={() => queryPag(num)}
>
{String(num)}
</button>
</li>
{/each}
<li class="page-item {currentPag === cantpag ? 'disabled' : ''}">
<button
class="page-link"
onclick={() =>
currentPag < cantpag && queryPag(currentPag + 1)}
>Siguiente</button
>
</li>
</ul>
</nav>
{/if}