Skip to content
Snippets Groups Projects

Add Pagination Styles

Merged
Timur Oberhuberrequested to merge
add-pagination into master
All threads resolved!

Files

+ 41
0
@@ -353,6 +353,47 @@
</div>
</div>
<div class="flex vertical gap-3">
<h2 class="font-500">Pagination</h2>
<nav aria-label="Pagination" class="pagination">
<ul role="list">
<li><a>&laquo;</a></li>
<li><a href="?page=1" aria-current="page">1</a></li>
<li><a href="?page=2">2</a></li>
<li><a href="?page=3">3</a></li>
<li><a>&mldr;</a></li>
<li><a href="?page=6">&raquo;</a></li>
</ul>
</nav>
<nav aria-label="Pagination" class="pagination">
<ul role="list">
<li><a href="?page=1">&laquo</a></li>
<li><a>&mldr;</a></li>
<li><a href="?page=1">2</a></li>
<li><a href="?page=2">3</a></li>
<li><a href="?page=3" aria-current="page">4</a></li>
<li><a>&raquo;</a></li>
</ul>
</nav>
<h3 class="font-300 underlined">JavaScript to change the page query parameter:</h3>
<code>
&lt;script&gt; <br>
&nbsp; $(() => { <br>
&nbsp; &nbsp; $(".pagination button, .pagination a").click(function () { <br>
&nbsp; &nbsp; &nbsp; let url = new URL(window.location); <br>
&nbsp; &nbsp; &nbsp; url.searchParams.set("page", $(this).data("page")); <br>
&nbsp; &nbsp; &nbsp; window.location = url.href; <br>
&nbsp; &nbsp; }); <br>
&nbsp; }); <br>
&lt;/script&gt;
</code>
</div>
</main>
<script>
Loading