首页 > 解决方案 > Spring Boot中的分页带有表单参数

问题描述

我正在使用弹簧靴和百里香。

我有一个带有特定参数搜索表单的页面,然后将数据作为 POST 请求提交。

该页面在表格中显示结果并且工作正常。该表显示了正确的分页选项和结果,

问题:当我单击按钮以在第 2 页或以后显示结果时,之前搜索的 POST 数据丢失。

问题:如何在分页期间保留已发布的数据?

控制器:

@RequestMapping(value = "/list",method = {RequestMethod.POST, RequestMethod.GET})
public String list(@RequestParam(name = "page", defaultValue = "0") int page,
        @RequestParam(name = "name", defaultValue = "") String name,
        @RequestParam(name = "lastname", defaultValue = "") String lastname,
            Pageable pageable,
            Model model) {

    Pageable pageRequest = new PageRequest(page, 4);
    Cliente cliente = new Cliente();
    Page<Cliente> clientes;



    if (name.equals("") && lastname.equals("")) {
        clientes = clienteService.findAll(pageRequest);

    }else {
        clientes = clienteService.findMatch(name, lastname, pageRequest);
    }


    PageRender<Cliente> pageRender = new PageRender<Cliente>("/listar", clientes);
    model.addAttribute("titulo", "Listado de clientes");
    model.addAttribute("clientes", clientes);

    model.addAttribute("cliente", cliente);
    model.addAttribute("page", pageRender);
    return "listar";
}

HTML:

<form th:action="@{/listar}" th:object="${cliente}" method="post">
                            <div class="form-group row">
                                <label for="nombre" class="col-sm-2 col-form-label">Nombre</label>
                                <div class="col-sm-6">
                                    <input type="text" th:field="*{nombre}" class="form-control"
                                        th:errorclass="'form-control alert-danger'" /> <small
                                        class="form-text text-danger"
                                        th:if="${#fields.hasErrors('nombre')}" th:errors="*{nombre}"></small>
                                </div>
                            </div>
                            <div class="form-group row">
                                <label for="nombre" class="col-sm-2 col-form-label">Apellido</label>
                                <div class="col-sm-6">
                                    <input type="text" th:field="*{apellido}" class="form-control"
                                        th:errorclass="'form-control alert-danger'" /> <small
                                        class="form-text text-danger"
                                        th:if="${#fields.hasErrors('apellido')}" th:errors="*{apellido}"></small>
                                </div>
                            </div>
                            <div class="form-group row">
                                <div class="col-sm-6">
                                    <input type="submit" th:value="'Buscar'"
                                        class="btn btn-secondary" />
                                </div>
                            </div>


                        </form>

分页:

<nav th:fragment="paginator">

    <ul class="pagination">
        <li class="page-item"
            th:class="${page.first? 'page-item disabled': 'page-item'}"><span
            class="page-link" th:if="${page.first}">Primera</span> <a
            class="page-link" th:if="${not page.first}"
            th:href="@{${page.url}(page=0)}">Primera</a></li>


        <li class="page-item"
            th:class="${not page.hasPrevious? 'page-item disabled': 'page-item'}">
            <span class="page-link" th:if="${not page.hasPrevious}">&laquo;</span>
            <a class="page-link" th:if="${page.hasPrevious}"
            th:href="@{${page.url}(page=${page.paginaActual-2})}">&laquo;</a>
        </li>

        <li class="page-item" th:each="item : ${page.paginas}"
            th:class="${item.actual? 'page-item active': 'page-item'}"><span
            class="page-link" th:if="${item.actual}" th:text="${item.numero}"></span>
            <a class="page-link" th:if="${not item.actual}"
            th:href="@{${page.url}(page=${item.numero-1})}"
            th:text="${item.numero}"></a></li>


        <li class="page-item"
            th:class="${not page.hasNext? 'page-item disabled': 'page-item'}">
            <span class="page-link" th:if="${not page.hasNext}">&raquo;</span> <a
            class="page-link" th:if="${page.hasNext}"
            th:href="@{${page.url}(page=${page.paginaActual})}">&raquo;</a>
        </li>
        <li class="page-item"
            th:class="${page.last? 'page-item disabled': 'page-item'}"><span
            class="page-link" th:if="${page.last}">&Uacute;ltima</span> <a
            class="page-link" th:if="${not page.last}"
            th:href="@{${page.url}(page=${page.totalPaginas-1})}">&Uacute;ltima</a>
        </li>
    </ul>

</nav>

标签: spring-bootpaginationthymeleaf

解决方案


我有类似的情况,我使用了请求参数。所以诀窍是根据我们执行的搜索来捕获请求参数。然后,您可以获取该参数(从 URL)并在您为分页构建的链接中使用它。

例如,假设您的 post/get URL 如下所示:

http://localhost:8080/listByName?name=earth

然后获取“名称”参数的值并在您的 html 表/列表中构建分页 url(链接)时使用它,如下所示:

th:href="@{/listByName/(name=${#request.getParameter('name')},pageSize=${selectedPageSize}, page=${page})}"

对我来说它工作得很好。这样,您就不必使用 flashAttributes 或使用 JavaScript 编写额外的代码。


推荐阅读