How to output a certain number of th:each values ​​- thymeleaf?

Question

Java

Friends, I’m stuck in one place .. I’m trying to display values ​​from the database, but I ran into the fact that it beats all 500 records for me, and I need 5) Moreover, it creates each block again and again, instead of filling places given to him. I throw the code

<section class="page-category-1 page-category-1_left">
                            <h2 class="page-title" th:text="#{category.politic}"></h2>
                            <div class="page-category-1__container" th:each="news : ${newses}">
                                <div  class="page-category-1__col">
                                    <div class="page-category-1__big">
                                        <div class="page-category-1__image"><a href="#"><img src="https://ipsumimage.appspot.com/380x260" alt=""></a></div>
                                        <div class="page-category-1__big-title">
                                            <a th:href="${news.getLink()}" th:text="${news.getTitle()}"></a></div>
                                        <ul class="page-category-1__info">
                                            <li th:text="${news.getSource()}"></li>
                                            <li th:text="${news.getDate()}"></li>
                                        </ul>

                                    </div>
                                </div>
                                <div class="page-category-1__col">
                                    <div class="page-category-1__small" >
                                        <div class="page-category-1__small-title"><a th:href="${news.getLink()}" th:text="${news.getTitle()}"></a></div>
                                        <ul class="page-category-1__info">
                                            <li th:text="${news.getSource()}"></li>
                                            <li th:text="${news.getDate()}"></li>
                                        </ul>
                                    </div>
                                    <div class="page-category-1__small">
                                        <div class="page-category-1__small-title"><a th:href="${news.getLink()}" th:text="${news.getTitle()}"></a></div>
                                        <ul class="page-category-1__info">
                                            <li th:text="${news.getSource()}"></li>
                                            <li th:text="${news.getDate()}"></li>
                                        </ul>
                                    </div>
                                    <div class="page-category-1__small">
                                        <div class="page-category-1__small-title"><a th:href="${news.getLink()}" th:text="${news.getTitle()}"></a></div>
                                        <ul class="page-category-1__info">
                                            <li th:text="${news.getSource()}"></li>
                                            <li th:text="${news.getDate()}"></li>
                                        </ul>
                                    </div>
                                    <div class="page-category-1__small">
                                        <div class="page-category-1__small-title"><a th:href="${news.getLink()}" th:text="${news.getTitle()}"></a></div>
                                        <ul class="page-category-1__info">
                                            <li th:text="${news.getSource()}"></li>
                                            <li th:text="${news.getDate()}"></li>
                                        </ul>
                                    </div>
                                </div>
                            </div>
                            <div class="page-all"><a href="#">Всі політичні новини України<svg viewBox="0 0 512 512"><use xlink:href="#icon-arrow"></use></svg></a></div>
                        </section>

The result is:


Tell me, please, what am I doing wrong?

Answer 1

Hello!

but faced with the fact that it beats all 500 records for me

You either implement pagination and, accordingly, specify the number of output records there
https://www.baeldung.com/spring-data-jpa-paginatio...
Or get the required number in the controller in advance List<News>.
It means that at the repository level you can make a limit - https://www.baeldung.com/jpa-limit-query-results

Moreover, it creates each block again and again, instead of filling in the places displayed for it. I throw the code

This is because you display the same news every time in blocks.
Here is your loop:
th:each="news : ${newses}"
And each time you display the same news in one iteration
th:href="${news.getLink()}"
And to display a similar block, taking into account the design, you can do the following...
For each n-th post, apply CSS style or add the necessary html to display it on the left with a picture.
To get the index of an entry, use an iterator
th:each="news, iter : ${newses}"