Jun 22, 2022
0
Level 2
InertiaJS Pagination in bootstrap
All the examples of InertiaJS pagination are using Tailwind CSS. For those not familiar with Tailwind CSS ,this is an example pagination component using bootstrap. Am using Svelte thus if using Vue or React just replace the Svelte syntax with Vue or React Syntax.
Pagination.svelte
<script>
import { inertia } from '@inertiajs/inertia-svelte'
export let links = []
</script>
{#if links.length > 3}
<nav aria-label="...">
<ul class="pagination pagination-sm">
{#each links as link, key (key)}
{#if link.url === null}
<li class="page-item">
<a class="page-link" href="#!" tabindex="-1">{@html link.label}</a>
</li>
{:else}
<li class="page-item">
<a class="page-link" use:inertia href="{link.url}">{@html link.label}</a>
</li>
{/if}
{/each}
</ul>
</nav>
{/if}
Raw Bootstrap example:
<nav aria-label="...">
<ul class="pagination pagination-sm">
<li class="page-item disabled">
<a class="page-link" href="#" tabindex="-1">1</a>
</li>
<li class="page-item"><a class="page-link" href="#">2</a></li>
<li class="page-item"><a class="page-link" href="#">3</a></li>
</ul>
</nav>
Cheers!
Please or to participate in this conversation.