Bootstrap & Thymleaf Pagination

[iman]

Hallo Leute,

ich wurde ein Pagination mit Bootstrap herstellen. Ich benutze davon auch Thymleaf. Aber leider klap das nicht.
Hier lasse ich mein HTML Code. danke euch.

<nav class="Page navigation example">
            <ul class="pagination justify-content-center"
                th:classappend="${currentPage}==${i}?'active':''">
               
                <li class="page-item"><a class="page-link" th:if="${currentPage > 1}"
                    th:href="@{${keyword} ? '/page/1' + '?keyword=' + ${keyword} : '/page/1'}"
                    onclick="setKeyword();">First</a> <span class="page-link"
                    th:unless="${currentPage > 1}">First</span></li>


                <li class="page-item"><a class="page-link" th:if="${currentPage > 1}"
                    th:href="@{${keyword} ? '/page/' + ${currentPage - 1} + '?keyword=' + ${keyword} : '/page/' + ${currentPage - 1}}"
                    onclick="setKeyword();">Previous</a> <span class="page-link"
                    th:unless="${currentPage > 1}">Previous</span></li>


                <li class="page-item"><span
                    th:each="i: ${#numbers.sequence(possiblePrevPage, possibleNextPage)}">
                        <a class="page-link active"  onclick="setKeyword();" th:if="${currentPage != i}"
                        th:href="@{${keyword} ? '/page/' + ${i} + '?keyword=' + ${keyword} : '/page/' + ${i}}">[[${i}]]</a>
                        <a class="page-link " th:unless="${currentPage != i}">[[${i}]]</a> 
                </span></li>


                <li class="page-item"><a class="page-link" th:if="${currentPage < totalPages}"
                    th:href="@{${keyword} ? '/page/' + ${currentPage + 1} + '?keyword=' + ${keyword} : '/page/' + ${currentPage + 1}}"
                    onclick="setKeyword();">Next</a> <span class="page-link"
                    th:unless="${currentPage < totalPages}">Next</span></li>


                <li class="page-item"><a class="page-link" th:if="${currentPage < totalPages}"
                    th:href="@{${keyword} ? '/page/' + ${totalPages} + '?keyword=' + ${keyword} : '/page/' + ${totalPages}}"
                    onclick="setKeyword();">Last</a> <span class="page-link"
                    th:unless="${currentPage < totalPages}">Last</span></li>
            </ul>
</nav>

 

[mrBrown]

Und was klappt nicht?

 

[iman]

Und was klappt nicht?

Es sieht so aus. Die Seite stehen übereinander und auch zeigt nicht die Active Seite.

 

[sascha-sphw]

<li class="page-item"><span th:each="i: ${#numbers.sequence(possiblePrevPage, possibleNextPage)}"> <a class="page-link active" onclick="setKeyword();" th:if="${currentPage != i}" th:href="@{${keyword} ? '/page/' + ${i} + '?keyword=' + ${keyword} : '/page/' + ${i}}">[[${i}]]</a> <a class="page-link " th:unless="${currentPage != i}">[[${i}]]</a> </span></li>

So wie ich das sehe erstellst Du auch lauter span tags innerhalb des li tags, sollten das nicht alles li tags sein?

 

[iman]

So wie ich das sehe erstellst Du auch lauter span tags innerhalb des li tags, sollten das nicht alles li tags sein?

Die Span tags gehören jede von eine li tag. die liefern die datei von Controller mit Thymeleaf .

 

[sascha-sphw]

Die Span tags gehören jede von eine li tag. die liefern die datei von Controller mit Thymeleaf .

Das machst Du aber nicht. Du erstellts 1 li tag und darin dann alle 2-12 als span. Deshalb sieht es auch so aus.

Du musst th:each in das li tag verschieben. Und span kannst Du ganz weg lassen.

 

[sascha-sphw]

So meine ich:

<li class="page-item" th:each="i: ${#numbers.sequence(possiblePrevPage, possibleNextPage)}">
                        <a class="page-link active"  onclick="setKeyword();" th:if="${currentPage != i}"
                        th:href="@{${keyword} ? '/page/' + ${i} + '?keyword=' + ${keyword} : '/page/' + ${i}}">[[${i}]]</a>
                        <a class="page-link " th:unless="${currentPage != i}">[[${i}]]</a>
</li>

 

[iman]

Das machst Du aber nicht. Du erstellts 1 li tag und darin dann alle 2-12 als span. Deshalb sieht es auch so aus.

Du musst th:each in das li tag verschieben. Und span kannst Du ganz weg lassen.

ich verstehe nicht wie, Könntest du bitte es korrigieren?

 

[iman]

ich

So meine ich:

<li class="page-item" th:each="i: ${#numbers.sequence(possiblePrevPage, possibleNextPage)}">
                        <a class="page-link active"  onclick="setKeyword();" th:if="${currentPage != i}"
                        th:href="@{${keyword} ? '/page/' + ${i} + '?keyword=' + ${keyword} : '/page/' + ${i}}">[[${i}]]</a>
                        <a class="page-link " th:unless="${currentPage != i}">[[${i}]]</a>
</li>

ich danke dir. Es funktioniert.

 

[iman]

So meine ich:

<li class="page-item" th:each="i: ${#numbers.sequence(possiblePrevPage, possibleNextPage)}">
                        <a class="page-link active"  onclick="setKeyword();" th:if="${currentPage != i}"
                        th:href="@{${keyword} ? '/page/' + ${i} + '?keyword=' + ${keyword} : '/page/' + ${i}}">[[${i}]]</a>
                        <a class="page-link " th:unless="${currentPage != i}">[[${i}]]</a>
</li>

Es gibt noch eine Problem. Es zeigt nicht die Active Seite ( aktuelle Seite )

 

[sascha-sphw]

Vermutlich wegen currentPage != i. Du willst ja das der a tag verwendet wird wenn currentPage == i ist, oder? So dann vermutlich auch beim span tag.

 

[iman]

Vermutlich wegen currentPage != i. Du willst ja das der a tag verwendet wird wenn currentPage == i ist, oder? So dann vermutlich auch beim span tag.

ist erledigt. ich habe in li tag so geschrieben

th:classappend="${currentPage == i} ? active : ''"