mirror of
https://github.com/halo-dev/theme-earth.git
synced 2026-01-13 07:03:50 +08:00
04ae86464d
 ```release-note 修复在 pagination 不存在时添加事件监听器的问题 ```
45 lines
2.2 KiB
HTML
45 lines
2.2 KiB
HTML
<div th:fragment="pagination(context,prevUrl,nextUrl,totalPages,page,hasPrevious,hasNext)">
|
|
<div class="mt-6 flex items-center justify-between" th:if="${hasPrevious || hasNext}">
|
|
<a
|
|
th:href="@{${prevUrl}}"
|
|
class="whitespace-no-wrap group inline-flex items-center justify-center gap-1 rounded-md border border-gray-200 bg-white px-4 py-1 text-sm font-medium leading-6 text-gray-600 shadow-sm hover:bg-gray-50 focus:shadow-none focus:outline-none dark:border-slate-600 dark:bg-slate-700 dark:text-slate-100 dark:hover:bg-slate-600 dark:hover:text-white"
|
|
th:classappend="${!hasPrevious ? 'pointer-events-none opacity-60' : ''}"
|
|
>
|
|
<span class="i-tabler-arrow-left text-lg transition-all group-hover:-translate-x-1"></span>
|
|
<span th:text="#{common.previousPage}"></span>
|
|
</a>
|
|
<select id="pagination" class="bg-transparent text-sm text-gray-900 outline-none dark:text-slate-50">
|
|
<option
|
|
th:each="i : ${#numbers.sequence(1,totalPages)}"
|
|
th:selected="${i == page}"
|
|
th:value="${i}"
|
|
th:text="|${i} / ${totalPages}|"
|
|
class="bg-white text-gray-900 dark:bg-slate-700 dark:text-slate-50"
|
|
></option>
|
|
</select>
|
|
<a
|
|
th:href="@{${nextUrl}}"
|
|
class="whitespace-no-wrap group inline-flex items-center justify-center gap-1 rounded-md border border-gray-200 bg-white px-4 py-1 text-sm font-medium leading-6 text-gray-600 shadow-sm hover:bg-gray-50 focus:shadow-none focus:outline-none dark:border-slate-600 dark:bg-slate-700 dark:text-slate-100 dark:hover:bg-slate-600 dark:hover:text-white"
|
|
th:classappend="${!hasNext ? 'pointer-events-none opacity-60' : ''}"
|
|
>
|
|
<span th:text="#{common.nextPage}"></span>
|
|
<span class="i-tabler-arrow-right text-lg transition-all group-hover:translate-x-1"></span>
|
|
</a>
|
|
</div>
|
|
|
|
<script th:inline="javascript">
|
|
document.addEventListener("DOMContentLoaded", () => {
|
|
const paginationSelect = document.getElementById("pagination");
|
|
|
|
if (!paginationSelect) {
|
|
return;
|
|
}
|
|
|
|
paginationSelect.addEventListener("change", (event) => {
|
|
const selectedPage = event.target.value;
|
|
window.location.href = `[(${context})]page/${selectedPage}`;
|
|
});
|
|
});
|
|
</script>
|
|
</div>
|