mirror of
https://github.com/spring-projects/spring-petclinic.git
synced 2026-02-16 10:51:12 +00:00
Paing Update
This commit is contained in:
parent
6feeae0f13
commit
3eef14eef4
12 changed files with 280 additions and 73 deletions
|
|
@ -13,6 +13,10 @@ address=Address
|
|||
city=City
|
||||
telephone=Telephone
|
||||
owners=Owners
|
||||
owners.pageSize.label=Page Row
|
||||
owners.pageSize.submit=Apply
|
||||
owners.pagination.summary=Showing {0}-{1} of {2}
|
||||
owners.pagination.ellipsis=...
|
||||
addOwner=Add Owner
|
||||
findOwner=Find Owner
|
||||
findOwners=Find Owners
|
||||
|
|
|
|||
|
|
@ -49,3 +49,9 @@ petsAndVisits=Haustiere und Besuche
|
|||
error.404=Die angeforderte Seite wurde nicht gefunden.
|
||||
error.500=Ein interner Serverfehler ist aufgetreten.
|
||||
error.general=Ein unerwarteter Fehler ist aufgetreten.
|
||||
|
||||
owners.pageSize.label=Page Row
|
||||
owners.pageSize.submit=Apply
|
||||
owners.pagination.summary=Showing {0}-{1} of {2}
|
||||
|
||||
owners.pagination.ellipsis=...
|
||||
|
|
|
|||
|
|
@ -49,3 +49,9 @@ petsAndVisits=Mascotas y visitas
|
|||
error.404=La página solicitada no fue encontrada.
|
||||
error.500=Ocurrió un error interno del servidor.
|
||||
error.general=Ocurrió un error inesperado.
|
||||
|
||||
owners.pageSize.label=Page Row
|
||||
owners.pageSize.submit=Apply
|
||||
owners.pagination.summary=Showing {0}-{1} of {2}
|
||||
|
||||
owners.pagination.ellipsis=...
|
||||
|
|
|
|||
|
|
@ -49,3 +49,9 @@ petsAndVisits=حیوانات و ویزیتها
|
|||
error.404=صفحه درخواستی پیدا نشد.
|
||||
error.500=خطای داخلی سرور رخ داد.
|
||||
error.general=خطای غیرمنتظرهای رخ داد.
|
||||
|
||||
owners.pageSize.label=Page Row
|
||||
owners.pageSize.submit=Apply
|
||||
owners.pagination.summary=Showing {0}-{1} of {2}
|
||||
|
||||
owners.pagination.ellipsis=...
|
||||
|
|
|
|||
|
|
@ -49,3 +49,9 @@ petsAndVisits=반려동물 및 방문
|
|||
error.404=요청하신 페이지를 찾을 수 없습니다.
|
||||
error.500=서버 내부 오류가 발생했습니다.
|
||||
error.general=알 수 없는 오류가 발생했습니다.
|
||||
|
||||
owners.pageSize.label=Page Row
|
||||
owners.pageSize.submit=Apply
|
||||
owners.pagination.summary=Showing {0}-{1} of {2}
|
||||
|
||||
owners.pagination.ellipsis=...
|
||||
|
|
|
|||
|
|
@ -49,3 +49,9 @@ petsAndVisits=Animais e visitas
|
|||
error.404=A página solicitada não foi encontrada.
|
||||
error.500=Ocorreu um erro interno no servidor.
|
||||
error.general=Ocorreu um erro inesperado.
|
||||
|
||||
owners.pageSize.label=Page Row
|
||||
owners.pageSize.submit=Apply
|
||||
owners.pagination.summary=Showing {0}-{1} of {2}
|
||||
|
||||
owners.pagination.ellipsis=...
|
||||
|
|
|
|||
|
|
@ -49,3 +49,9 @@ petsAndVisits=Питомцы и визиты
|
|||
error.404=Запрашиваемая страница не найдена.
|
||||
error.500=Произошла внутренняя ошибка сервера.
|
||||
error.general=Произошла непредвиденная ошибка.
|
||||
|
||||
owners.pageSize.label=Page Row
|
||||
owners.pageSize.submit=Apply
|
||||
owners.pagination.summary=Showing {0}-{1} of {2}
|
||||
|
||||
owners.pagination.ellipsis=...
|
||||
|
|
|
|||
|
|
@ -49,3 +49,9 @@ petsAndVisits=Evcil Hayvanlar ve Ziyaretler
|
|||
error.404=İstenen sayfa bulunamadı.
|
||||
error.500=Sunucuda dahili bir hata oluştu.
|
||||
error.general=Beklenmeyen bir hata oluştu.
|
||||
|
||||
owners.pageSize.label=Page Row
|
||||
owners.pageSize.submit=Apply
|
||||
owners.pagination.summary=Showing {0}-{1} of {2}
|
||||
|
||||
owners.pagination.ellipsis=...
|
||||
|
|
|
|||
|
|
@ -6,6 +6,23 @@
|
|||
|
||||
<h2 th:text="#{owners}">Owners</h2>
|
||||
|
||||
<div class="owner-list-toolbar d-flex flex-column flex-lg-row align-items-lg-center justify-content-between gap-3 mb-3">
|
||||
<div class="text-muted small" th:if="${totalItems > 0}"
|
||||
th:text="#{owners.pagination.summary(${startItem}, ${endItem}, ${totalItems})}">Showing 1-10 of 42</div>
|
||||
<form class="d-flex align-items-center gap-2" th:action="@{/owners}" method="get">
|
||||
<input type="hidden" name="page" value="1" />
|
||||
<input type="hidden" name="lastName" th:value="${owner.lastName}" />
|
||||
<label class="form-label mb-0 small" for="pageSize" th:text="#{owners.pageSize.label}">Page Row</label>
|
||||
<select id="pageSize" name="size" class="form-select form-select-sm" onchange="this.form.submit()">
|
||||
<option th:each="option : ${pageSizeOptions}" th:value="${option}" th:selected="${option == pageSize}"
|
||||
th:text="${option}">10</option>
|
||||
</select>
|
||||
<noscript>
|
||||
<button type="submit" class="btn btn-primary btn-sm" th:text="#{owners.pageSize.submit}">Apply</button>
|
||||
</noscript>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
<table id="owners" class="table table-striped">
|
||||
<thead>
|
||||
<tr>
|
||||
|
|
@ -28,34 +45,56 @@
|
|||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<div th:if="${totalPages > 1}">
|
||||
<span th:text="#{pages}">Pages:</span>
|
||||
<span>[</span>
|
||||
<span th:each="i: ${#numbers.sequence(1, totalPages)}">
|
||||
<a th:if="${currentPage != i}" th:href="@{'/owners?page=' + ${i}}">[[${i}]]</a>
|
||||
<span th:unless="${currentPage != i}">[[${i}]]</span>
|
||||
</span>
|
||||
<span>] </span>
|
||||
<span>
|
||||
<a th:if="${currentPage > 1}" th:href="@{'/owners?page=1'}" th:title="#{first}" class="fa fa-fast-backward"></a>
|
||||
<span th:unless="${currentPage > 1}" th:title="#{first}" class="fa fa-fast-backward"></span>
|
||||
</span>
|
||||
<span>
|
||||
<a th:if="${currentPage > 1}" th:href="@{'/owners?page=__${currentPage - 1}__'}" th:title="#{previous}"
|
||||
class="fa fa-step-backward"></a>
|
||||
<span th:unless="${currentPage > 1}" th:title="#{previous}" class="fa fa-step-backward"></span>
|
||||
</span>
|
||||
<span>
|
||||
<a th:if="${currentPage < totalPages}" th:href="@{'/owners?page=__${currentPage + 1}__'}" th:title="#{next}"
|
||||
class="fa fa-step-forward"></a>
|
||||
<span th:unless="${currentPage < totalPages}" th:title="#{next}" class="fa fa-step-forward"></span>
|
||||
</span>
|
||||
<span>
|
||||
<a th:if="${currentPage < totalPages}" th:href="@{'/owners?page=__${totalPages}__'}" th:title="#{last}"
|
||||
class="fa fa-fast-forward"></a>
|
||||
<span th:unless="${currentPage < totalPages}" th:title="#{last}" class="fa fa-fast-forward"></span>
|
||||
</span>
|
||||
<div class="owner-list-pagination d-flex flex-column flex-lg-row align-items-lg-center justify-content-lg-between gap-3 mt-4"
|
||||
th:if="${totalPages > 1}">
|
||||
<div class="text-muted small" th:text="#{owners.pagination.summary(${startItem}, ${endItem}, ${totalItems})}">
|
||||
Showing 1-10 of 42
|
||||
</div>
|
||||
<nav class="flex-grow-1" aria-label="Owners pagination">
|
||||
<ul class="pagination justify-content-lg-end justify-content-center mb-0">
|
||||
<li class="page-item" th:classappend="${currentPage == 1} ? ' disabled'">
|
||||
<a class="page-link" th:href="@{/owners(page=1, size=${pageSize}, lastName=${owner.lastName})}"
|
||||
th:title="#{first}" aria-label="First">
|
||||
<span class="fa fa-fast-backward" aria-hidden="true"></span>
|
||||
<span class="visually-hidden" th:text="#{first}">First</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="page-item" th:classappend="${currentPage == 1} ? ' disabled'">
|
||||
<a class="page-link"
|
||||
th:href="@{/owners(page=${currentPage - 1}, size=${pageSize}, lastName=${owner.lastName})}"
|
||||
th:title="#{previous}" aria-label="Previous">
|
||||
<span class="fa fa-step-backward" aria-hidden="true"></span>
|
||||
<span class="visually-hidden" th:text="#{previous}">Previous</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="page-item disabled" th:if="${showLeadingGap}">
|
||||
<span class="page-link" aria-hidden="true" th:text="#{owners.pagination.ellipsis}"></span>
|
||||
</li>
|
||||
<li class="page-item" th:each="i : ${pageNumbers}" th:classappend="${currentPage == i} ? ' active'">
|
||||
<a class="page-link" th:href="@{/owners(page=${i}, size=${pageSize}, lastName=${owner.lastName})}"
|
||||
th:text="${i}" th:aria-current="${currentPage == i} ? 'page' : null"></a>
|
||||
</li>
|
||||
<li class="page-item disabled" th:if="${showTrailingGap}">
|
||||
<span class="page-link" aria-hidden="true" th:text="#{owners.pagination.ellipsis}"></span>
|
||||
</li>
|
||||
<li class="page-item" th:classappend="${currentPage == totalPages} ? ' disabled'">
|
||||
<a class="page-link"
|
||||
th:href="@{/owners(page=${currentPage + 1}, size=${pageSize}, lastName=${owner.lastName})}" th:title="#{next}"
|
||||
aria-label="Next">
|
||||
<span class="fa fa-step-forward" aria-hidden="true"></span>
|
||||
<span class="visually-hidden" th:text="#{next}">Next</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="page-item" th:classappend="${currentPage == totalPages} ? ' disabled'">
|
||||
<a class="page-link" th:href="@{/owners(page=${totalPages}, size=${pageSize}, lastName=${owner.lastName})}"
|
||||
th:title="#{last}" aria-label="Last">
|
||||
<span class="fa fa-fast-forward" aria-hidden="true"></span>
|
||||
<span class="visually-hidden" th:text="#{last}">Last</span>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
</div>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -6,6 +6,22 @@
|
|||
|
||||
<h2 th:text="#{vets}">Veterinarians</h2>
|
||||
|
||||
<div class="vet-list-toolbar d-flex flex-column flex-lg-row align-items-lg-center justify-content-between gap-3 mb-3">
|
||||
<div class="text-muted small" th:if="${totalItems > 0}"
|
||||
th:text="#{owners.pagination.summary(${startItem}, ${endItem}, ${totalItems})}">Showing 1-10 of 42</div>
|
||||
<form class="d-flex align-items-center gap-2" th:action="@{/vets.html}" method="get">
|
||||
<input type="hidden" name="page" value="1" />
|
||||
<label class="form-label mb-0 small" for="vetsPageSize" th:text="#{owners.pageSize.label}">Page Row</label>
|
||||
<select id="vetsPageSize" name="size" class="form-select form-select-sm" onchange="this.form.submit()">
|
||||
<option th:each="option : ${pageSizeOptions}" th:value="${option}" th:selected="${option == pageSize}"
|
||||
th:text="${option}">10</option>
|
||||
</select>
|
||||
<noscript>
|
||||
<button type="submit" class="btn btn-primary btn-sm" th:text="#{owners.pageSize.submit}">Apply</button>
|
||||
</noscript>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
<table id="vets" class="table table-striped">
|
||||
<thead>
|
||||
<tr>
|
||||
|
|
@ -23,35 +39,53 @@
|
|||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<div th:if="${totalPages > 1}">
|
||||
<span th:text="#{pages}">Pages:</span>
|
||||
<span>[</span>
|
||||
<span th:each="i: ${#numbers.sequence(1, totalPages)}">
|
||||
<a th:if="${currentPage != i}" th:href="@{'/vets.html?page=__${i}__'}">[[${i}]]</a>
|
||||
<span th:unless="${currentPage != i}">[[${i}]]</span>
|
||||
</span>
|
||||
<span>] </span>
|
||||
<span>
|
||||
<a th:if="${currentPage > 1}" th:href="@{'/vets.html?page=1'}" th:title="#{first}"
|
||||
class="fa fa-fast-backward"></a>
|
||||
<span th:unless="${currentPage > 1}" th:title="#{first}" class="fa fa-fast-backward"></span>
|
||||
</span>
|
||||
<span>
|
||||
<a th:if="${currentPage > 1}" th:href="@{'/vets.html?page=__${currentPage - 1}__'}" th:title="#{previous}"
|
||||
class="fa fa-step-backward"></a>
|
||||
<span th:unless="${currentPage > 1}" th:title="#{previous}" class="fa fa-step-backward"></span>
|
||||
</span>
|
||||
<span>
|
||||
<a th:if="${currentPage < totalPages}" th:href="@{'/vets.html?page=__${currentPage + 1}__'}" th:title="#{next}"
|
||||
class="fa fa-step-forward"></a>
|
||||
<span th:unless="${currentPage < totalPages}" th:title="#{next}" class="fa fa-step-forward"></span>
|
||||
</span>
|
||||
<span>
|
||||
<a th:if="${currentPage < totalPages}" th:href="@{'/vets.html?page=__${totalPages}__'}" th:title="#{last}"
|
||||
class="fa fa-fast-forward"></a>
|
||||
<span th:unless="${currentPage < totalPages}" th:title="#{last}" class="fa fa-fast-forward"></span>
|
||||
</span>
|
||||
<div class="vet-list-pagination d-flex flex-column flex-lg-row align-items-lg-center justify-content-lg-between gap-3 mt-4"
|
||||
th:if="${totalPages > 1}">
|
||||
<div class="text-muted small" th:text="#{owners.pagination.summary(${startItem}, ${endItem}, ${totalItems})}">
|
||||
Showing 1-10 of 42
|
||||
</div>
|
||||
<nav class="flex-grow-1" aria-label="Veterinarians pagination">
|
||||
<ul class="pagination justify-content-lg-end justify-content-center mb-0">
|
||||
<li class="page-item" th:classappend="${currentPage == 1} ? ' disabled'">
|
||||
<a class="page-link" th:href="@{/vets.html(page=1, size=${pageSize})}" th:title="#{first}" aria-label="First">
|
||||
<span class="fa fa-fast-backward" aria-hidden="true"></span>
|
||||
<span class="visually-hidden" th:text="#{first}">First</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="page-item" th:classappend="${currentPage == 1} ? ' disabled'">
|
||||
<a class="page-link" th:href="@{/vets.html(page=${currentPage - 1}, size=${pageSize})}"
|
||||
th:title="#{previous}" aria-label="Previous">
|
||||
<span class="fa fa-step-backward" aria-hidden="true"></span>
|
||||
<span class="visually-hidden" th:text="#{previous}">Previous</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="page-item disabled" th:if="${showLeadingGap}">
|
||||
<span class="page-link" aria-hidden="true" th:text="#{owners.pagination.ellipsis}"></span>
|
||||
</li>
|
||||
<li class="page-item" th:each="i : ${pageNumbers}" th:classappend="${currentPage == i} ? ' active'">
|
||||
<a class="page-link" th:href="@{/vets.html(page=${i}, size=${pageSize})}" th:text="${i}"
|
||||
th:aria-current="${currentPage == i} ? 'page' : null"></a>
|
||||
</li>
|
||||
<li class="page-item disabled" th:if="${showTrailingGap}">
|
||||
<span class="page-link" aria-hidden="true" th:text="#{owners.pagination.ellipsis}"></span>
|
||||
</li>
|
||||
<li class="page-item" th:classappend="${currentPage == totalPages} ? ' disabled'">
|
||||
<a class="page-link" th:href="@{/vets.html(page=${currentPage + 1}, size=${pageSize})}" th:title="#{next}"
|
||||
aria-label="Next">
|
||||
<span class="fa fa-step-forward" aria-hidden="true"></span>
|
||||
<span class="visually-hidden" th:text="#{next}">Next</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="page-item" th:classappend="${currentPage == totalPages} ? ' disabled'">
|
||||
<a class="page-link" th:href="@{/vets.html(page=${totalPages}, size=${pageSize})}" th:title="#{last}"
|
||||
aria-label="Last">
|
||||
<span class="fa fa-fast-forward" aria-hidden="true"></span>
|
||||
<span class="visually-hidden" th:text="#{last}">Last</span>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
</div>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
</html>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue