Thymeleaf l oop и Javascript загрузить больше данных - PullRequest
Новая
       88

Thymeleaf l oop и Javascript загрузить больше данных

0 голосов
/ 29 апреля 2020

Я пытаюсь нарезать свои элементы в th:each l oop с помощью функции Javascript с добавленной кнопкой загрузки дополнительных данных, но, к сожалению, она не работает так, как я ожидал. Я буду признателен за любую помощь / способ решения моей проблемы.

Я не нашел ни одного решения, которое мне помогло бы.

Вот что я получил:

My results

Я хотел бы иметь ту же структуру для каждой группы, что и для первой (ГРУППА А), и кнопку «Показать больше», которая будет работать для каждой группы и исчезать там, где данные каждой группы будут полностью загружены. .

Вот мой JS код: 

$(document).ready(function () {
    $(".slice").slice(0, 2).show();
    $("#loadMore").on('click', function (e) {
        e.preventDefault();
        $(".slice:hidden").slice(0, 2).slideDown();
        if ($(".slice:hidden").length == 0) {
            $("#loadMore").fadeOut('slow');
        }
        $('html,body').animate({
            scrollTop: $(this).offset().top
        }, 1500);
    });
});

И мой HTML: 

<div class="col">
                <h3>..</h3>
                <h4>..</h4>
                <div th:each="match: ${matchesByGroup}">
                    <h2>
                        <th:block th:if="${match.key != 'absentGroup'}">
                            <th style".." th:text="${match.key}"></th>
                        </th:block>
                    </h2>
                    <div th:each="mapValue, stat : ${match.value}" th:if="${stat.even}">
                        <div class="row">
                            <div class="col-lg-6 mb-4 slice" th:with="leftMatchValue=${match.value.get(stat.index - 1)}">
                               .
                               .
                               .
                            </div>
                            <div class="col-lg-6 mb-4 slice" th:if="${stat.index &lt; match.value.size()}"
                                 th:with="rightMatchValue=${match.value.get(stat.index)}">
                               .
                               .
                               .
                            </div>
                        </div>
                    </div>
                    <a id="loadMore" class="btn btn-sm btn-primary" href="#">Display more</a>
                </div>
            </div>
...