Skip to content
Snippets Groups Projects

Add Pagination Styles

Merged Add Pagination Styles
add-pagination into master
All threads resolved!
Merged
Timur Oberhuberrequested to merge
add-pagination into master
All threads resolved!
Compare
and
2 files
+ 134
− 0
Compare changes
  • Side-by-side
  • Inline

Files

docs/index.html
+ 91
− 0
@@ -353,6 +353,97 @@
</div>
</div>
<div class="flex vertical gap-3">
<h2 class="font-500">Pagination</h2>
<nav
aria-label="Page navigation"
class="pagination"
data-page="1"
th:data-page-size="25">
<ul role="list"> <!-- Only show if more than 1 page -->
<li data-disabled="true" class="page__item">
<span class="page__link">&laquo;</span>
</li>
<!-- More pages than "spots" in the pagination -->
<block>
<block>
<block>
<li data-active="true" class="page__item">
<span class="page__link">1</span>
</li>
<li data-active="false" class="page__item">
<button
data-page="2"
class="page__link">2</button>
</li>
<li data-active="false" class="page__item">
<button
data-page="3"
class="page__link">3</button>
</li>
</block>
</block>
<block>
<li class="page__item"><a href="#" class="page__link">...</a></li>
</block>
</block>
</ul>
</nav>
<nav
aria-label="Page navigation"
class="pagination"
data-page="4"
data-page-size="25">
<ul role="list">
<block> <!-- Display if current page > number of "spots" in pagination -->
<li class="page__item"><a href="#" class="page__link">...</a></li>
</block>
<!-- Fewer pages than "spots" in the pagination -->
<block>
<block>
<li data-active="false" class="page__item">
<button
data-page="2"
class="page__link">2</button>
</li>
<li data-active="false" class="page__item">
<button
data-page="3"
class="page__link">3</button>
</li>
<li data-active="true" class="page__item">
<span class="page__link">4</span>
</li>
</block>
</block>
<!-- If this is the last page -->
<li data-disabled="true" class="page__item">
<span class="page__link">&raquo;</span>
</li>
</ul>
</nav>
<code>
<!-- JS to change the page query parameter -->
<script>
$(() => {
$(".pagination button.page__link").click(function () {
let url = new URL(window.location);
url.searchParams.set("page", $(this).data("page"));
window.location = url.href;
});
});
</script>
</code>
</div>
</main>
<script>