Изменить содержимое таблицы при изменении выпадающего списка - PullRequest
Новая
       8

Изменить содержимое таблицы при изменении выпадающего списка

0 голосов
/ 17 декабря 2018

У меня есть это: 

@GetMapping("/records")
public String getRecords(Model model) {
    model.addAttribute("tallies", getAllTallies(null));
    model.addAttribute("categories", getCategories());
    return "records";
}

getCategories() просто возвращает список Category с, а getAllTallies просто возвращает список всех Tally с.

ЕслиЗапрошенный параметр category равен нулю, тогда он вернет все подсчеты, независимо от категории.Но если он не равен нулю, он вернет все tallies только из указанного category.

Это getAllTallies: 

@GetMapping("/tallies")
@ResponseBody
public List<Tally> getAllTallies(@RequestParam(required = false) String category)

А затем в моем records.html: 

<body>
<div>
    <select class="form-control" >
        <option value="0">Select Category</option>
        <option th:each="category : ${categories}" th:value="${category.id}" th:text="${category.category}"></option>
    </select>
</div>
<table cellpadding="10" border="1px">
    <thead>
    <tr>
        <th> Nominee </th>
        <th> Category </th>
        <th> Tally </th>
    </tr>
    </thead>
    <tbody>
    <tr th:if="${tallies.empty}">
        <td colspan="3"> No Books Available </td>
    </tr>
    <tr th:each="tally : ${tallies}">
        <td><span th:text="${tally.nominee}"> Nominee </span></td>
        <td><span th:text="${tally.category}"> Category </span></td>
        <td><span th:text="${tally.count}"> Tally </span></td>
    </tr>
    </tbody>
</table>
</body>

То, что я пытаюсь сделать, это когда я выбираю новое значение из выпадающего списка (категория), то таблица также меняется в зависимости от категории.Я думал, если бы это было возможно без JQuery или JS , только HTML.Но мне трудно понять, как динамически обновлять таблицы с помощью выпадающего списка.

1 Ответ

0 голосов
/ 17 декабря 2018

Нет, не было бы способа достичь этого без js или jQuery.Дело в том, что Thymeleaf работает на стороне сервера.Таким образом, после рендеринга он не будет отображаться снова, если только вы не обновите свою страницу или не запросите ответ от вашего сервера, используя ajax.В вашем случае, простой ajax сработает.

HTML 

<body>
<div>
    <select id="categories" class="form-control" >
        <option value="0">Select Category</option>
        <option th:each="category : ${categories}" th:value="${category.id}" th:text="${category.category}"></option>
    </select>
</div>
<table cellpadding="10" border="1px">
    <thead>
    <tr>
        <th> Nominee </th>
        <th> Category </th>
        <th> Tally </th>
    </tr>
    </thead>
    <tbody id="tallies">
    <tr th:if="${tallies.empty}">
        <td colspan="3"> No Books Available </td>
    </tr>
    <tr th:each="tally : ${tallies}">
        <td><span th:text="${tally.nominee}"> Nominee </span></td>
        <td><span th:text="${tally.category}"> Category </span></td>
        <td><span th:text="${tally.count}"> Tally </span></td>
    </tr>
    </tbody>
</table>
</body>

Добавлены идентификаторы для выбора категорий и ваших tbody.

Контроллер 

@GetMapping("/tallies")
@ResponseBody
public List<Tally> getAllTallies(@RequestParam(value = "category", required = false) String category)

Добавлено имя для вашего параметра.

jQuery 

$('#categories').on('change', function() {
   $.ajax({
            url: '/tallies',
            type: 'GET',
            data: {
                category: $(this).val();
            },
            success: function(tallies) {
                // First, let's crear our tbody.
                $('#tallies').empty();

                // Now, let's go through each one of the tallies.
                $(tallies).each( function() {
                    // Here you should add your missing fields. I am just adding one as an example.
                    $('#tallies').append('<tr><td><span>' + this.nominee + '</span></td></tr>');
                })
            }
})
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...