ucef/as-talange
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: add pagination to equipment and licence search screens
AS Talange CI/CD Pipeline - Production / Build & Run Unit Tests (push) Successful in 1m53s
Details
AS Talange CI/CD Pipeline - Production / Deploy to Prod Environment (push) Successful in 2m46s
Details

Browse Source
This commit is contained in:
ucef
2026-08-03 16:09:52 +02:00
parent b9a7dc089c
commit 8d2a2e486a
4 changed files with 155 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files
as-talange-web/src/main/resources/templates/parametrage/equipements_recherche.html
+60 -2
View File
@@ -52,7 +52,7 @@
</form>
</div>
<div class="bg-white rounded-lg border border-gray-200 overflow-hidden">
<div id="equipements-table-container" class="bg-white rounded-lg border border-gray-200 overflow-hidden">
<table class="w-full text-left border-collapse">
<thead>
<tr class="bg-gray-50 text-gray-500 text-xs uppercase tracking-wider border-b border-gray-200">
@@ -67,7 +67,7 @@
</thead>
<tbody class="divide-y divide-gray-200 text-sm">
<tr th:if="${#lists.isEmpty(dotations)}">
<td colspan="6" class="py-8 text-center text-gray-500">Aucun résultat trouvé pour cette recherche.</td>
<td colspan="7" class="py-8 text-center text-gray-500">Aucun résultat trouvé pour cette recherche.</td>
</tr>
<tr th:each="dotation : ${dotations}" class="hover:bg-gray-50">
<td class="py-3 px-4 font-medium text-gray-900">
@@ -92,6 +92,64 @@
</tr>
</tbody>
</table>
<!-- Pagination Footer -->
<div class="px-6 py-4 border-t border-gray-200 flex items-center justify-between bg-gray-50 text-sm text-gray-700">
<div th:if="${totalElements > 0}">
Affichage de <span class="font-semibold" th:text="${currentPage * pageSize + 1}">1</span> à
<span class="font-semibold" th:text="${T(java.lang.Math).min((currentPage + 1) * pageSize, totalElements)}">20</span> sur
<span class="font-semibold" th:text="${totalElements}">100</span> équipements
</div>
<div th:if="${totalElements == 0}">
Aucun équipement à afficher
</div>
<div class="flex items-center space-x-2" th:if="${totalPages > 1}">
<!-- Page Précédente -->
<a th:if="${currentPage > 0}"
th:href="@{/admin/equipements/recherche(equipementId=${equipementId},categorieId=${categorieId},fourni=${fourni},page=${currentPage - 1})}"
hx-get="/admin/equipements/recherche"
hx-target="#equipements-table-container"
hx-select="#equipements-table-container"
hx-push-url="true"
th:attr="hx-vals=|{&quot;equipementId&quot;: &quot;${equipementId != null ? equipementId : ''}&quot;, &quot;categorieId&quot;: &quot;${categorieId != null ? categorieId : ''}&quot;, &quot;fourni&quot;: &quot;${fourni != null ? fourni : ''}&quot;, &quot;page&quot;: ${currentPage - 1}}|"
class="px-3 py-1 border border-gray-300 rounded hover:bg-gray-100 transition-colors">
Précédent
</a>
<span th:if="${currentPage == 0}" class="px-3 py-1 border border-gray-200 rounded text-gray-400 bg-gray-50 cursor-not-allowed">
Précédent
</span>
<!-- Numéros de pages -->
<th:block th:each="pageNum : ${#numbers.sequence(0, totalPages - 1)}" th:if="${totalPages > 0}">
<a th:href="@{/admin/equipements/recherche(equipementId=${equipementId},categorieId=${categorieId},fourni=${fourni},page=${pageNum})}"
hx-get="/admin/equipements/recherche"
hx-target="#equipements-table-container"
hx-select="#equipements-table-container"
hx-push-url="true"
th:attr="hx-vals=|{&quot;equipementId&quot;: &quot;${equipementId != null ? equipementId : ''}&quot;, &quot;categorieId&quot;: &quot;${categorieId != null ? categorieId : ''}&quot;, &quot;fourni&quot;: &quot;${fourni != null ? fourni : ''}&quot;, &quot;page&quot;: ${pageNum}}|"
th:text="${pageNum + 1}"
class="px-3 py-1 rounded transition-colors"
th:classappend="${currentPage == pageNum ? 'bg-blue-600 text-white' : 'border border-gray-300 hover:bg-gray-100'}">
1
</a>
</th:block>
<!-- Page Suivante -->
<a th:if="${currentPage < totalPages - 1}"
th:href="@{/admin/equipements/recherche(equipementId=${equipementId},categorieId=${categorieId},fourni=${fourni},page=${currentPage + 1})}"
hx-get="/admin/equipements/recherche"
hx-target="#equipements-table-container"
hx-select="#equipements-table-container"
hx-push-url="true"
th:attr="hx-vals=|{&quot;equipementId&quot;: &quot;${equipementId != null ? equipementId : ''}&quot;, &quot;categorieId&quot;: &quot;${categorieId != null ? categorieId : ''}&quot;, &quot;fourni&quot;: &quot;${fourni != null ? fourni : ''}&quot;, &quot;page&quot;: ${currentPage + 1}}|"
class="px-3 py-1 border border-gray-300 rounded hover:bg-gray-100 transition-colors">
Suivant
</a>
<span th:if="${currentPage == totalPages - 1}" class="px-3 py-1 border border-gray-200 rounded text-gray-400 bg-gray-50 cursor-not-allowed">
Suivant
</span>
</div>
</div>
</div>
</div>