Переключение данных в таблице HTML с помощью Thymeleaf и Spring Boot

Question

У меня есть веб-страница, созданная с помощью Thymeleaf, в которой в виде таблицы перечислены все файлы в указанной мной директории. Я хочу иметь кнопку, которая переключает содержимое таблицы в список файлов в другом каталоге. Как я могу это сделать?

Это моя кнопка:

<form method="get" class="switchFolder">
        <button type="button" style="width:100%" id="switcherButton" onclick="change()">Show failed files</button>
</form>

Это моя таблица:

<table class="table"> <!-- "table table-striped" -->
        <thead>
        <tr>
            <th class="nameColumn">Name</th>
            <th>Size in KB</th>
            <th>Last modified</th>
            <th>Processing status</th>
            <th>Validation result</th>
            <th class="deleteColumn"></th>
        </tr>
        </thead>

        <tbody>
        <tr id="rows" th:each="file:${filesTableData}" class="dataRow">
            <td><a th:href="${file.href}" th:text="${file.name}"></a></td> <!-- requires getter method for href -->
            <td th:text="${file.sizeInKB}"></td>
            <td th:text="${file.lastModified}"></td>
            <td th:text="${file.processingStatusCode}"></td>
            <td th:text="${file.validationResultCode}"></td>
            <td>
                <form method="get" th:action="@{/delete}">
                    <button class="deleteButton" type="submit" th:name="fileName" th:value="${file.name}"
                            style="width:100%">
                        Delete
                    </button>
                    <!--                    The default type for a button is submit. When a submit button is pressed, the page will be refreshed.-->
                </form>
            </td>
        </tr>
        </tbody>

    </table>

Это моя функция изменения JavaScript ():

function change() // no ';' here
{
    var elem = document.getElementById("switcherButton");
    if (elem.innerHTML == "Show failed files") {
        elem.innerHTML = "Show validated files";
        elem.style.backgroundColor = "red";

        // json object
        var switcherJson = {
            fileType: "failedFiles"
        }
    } else {
        elem.innerHTML = "Show failed files";
        elem.style.backgroundColor = "green";

        // json object
        var switcherJson = {
            fileType: "validatedFiles"
        }
    }

    $.ajax({
        type: "POST",
        url: "files",
        data: switcherJson,
        dataType: "text"
        /*success: function (result) {
            // do something.
        },
        error: function (result) {
            // do something.
        }*/
    });
}

Это мой метод контроллера Spring Boot:

@RequestMapping("/files")
    public String showFiles(Model model, @RequestParam(value = "fileType", required = false) String fileType) {
        if (fileType == null) {
            fileType = currentSwitch;
        }
        System.out.println("switcher value is " + fileType);
        if (fileType.equalsIgnoreCase("validatedFiles")) {
            model.addAttribute("filesTableData", fileService.listAllFilesInDefaultDirectory());
            currentSwitch = "validatedFiles";
        } else if (fileType.equalsIgnoreCase("failedFiles")) {
            List<SubmitDataFile> temp = fileService.listAllFailedFiles();
            model.addAttribute("filesTableData", fileService.listAllFailedFiles());
            System.out.println("this is inside else if failedFiles");
            currentSwitch = "failedFiles";
        }
        return "/files";
    }

При нажатии кнопки вызывается метод showFiles, а fileService.listAllFailedFiles () возвращает пустой список. Однако таблица на веб-странице не изменяется, чтобы отразить это. Он по-прежнему показывает результаты listAllFilesInDefaultDirectory (). Что я должен делать по-другому?