@kazhan

Как вывести определенное количество значений th:each — thymeleaf?

Друзья, что-то я буксую на одном месте.. Пытаюсь вывести значения из базы, но столкнулся с тем, что оно мне лупит все 500 записей, а мне нужно 5) Более того создает каждый блок снова и снова, вместо того, чтобы заполнить выведенные ему места. кидаю код

<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>


В результате такое:
5ee14866c564c708401387.png

Подскажите, пожалуйста, что я делаю не так?
  • Вопрос задан
  • 299 просмотров
Пригласить эксперта
Ответы на вопрос 1
azerphoenix
@azerphoenix Куратор тега Java
Java Software Engineer
Здравствуйте!
но столкнулся с тем, что оно мне лупит все 500 записей

Вы либо реализуйте пагинацию и соответственно, кол-во выводимых записей укажите там
https://www.baeldung.com/spring-data-jpa-paginatio...
Либо заранее получите в контроллере нужное количество List<News>.
Имеется ввиде, что на уровне репозитория можете сделать limit - https://www.baeldung.com/jpa-limit-query-results

Более того создает каждый блок снова и снова, вместо того, чтобы заполнить выведенные ему места. кидаю код

Это потому, что вы одну и ту же новость выводите каждый раз в блоках.
Вот, ваш цикл:
th:each="news : ${newses}"
И каждый раз вы выводите одну и ту же новость в одной итерации
th:href="${news.getLink()}"
А чтобы вывести подобный блок с учетом дизайна можно сделать следующее...
Для каждой n-й записи применяем CSS стиль или добавляем нужный html, чтобы вывести ее слева с картинкой.
Чтобы получить индекс записи используйте итератор
th:each="news, iter : ${newses}"
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы