使用thymeleaf进行分页查询前端代码

您可以参考以下代码，使用Thymeleaf进行分页查询的前端实现：

<!-- 分页查询表单 -->
<form action="#" th:action="@{/search}" th:method="get">
    <input type="text" name="keyword" placeholder="请输入关键词" required th:value="${keyword}">
    <button type="submit">搜索</button>
</form>

<!-- 分页展示数据 -->
<table>
    <thead>
        <tr>
            <th>ID</th>
            <th>名称</th>
            <th>类型</th>
        </tr>
    </thead>
    <tbody>
        <tr th:each="item : ${items}">
            <td th:text="${item.id}"></td>
            <td th:text="${item.name}"></td>
            <td th:text="${item.type}"></td>
        </tr>
    </tbody>
</table>

<!-- 分页导航 -->
<div class="pagination">
    <ul>
        <li th:class="${page.number == 0} ? disabled">
            <a th:if="${page.number != 0}" th:href="@{/search(keyword=${keyword},page=0)}">首页</a>
            <span th:if="${page.number == 0}">首页</span>
        </li>
        <li th:class="${page.number == 0} ? disabled">
            <a th:if="${page.number != 0}" th:href="@{/search(keyword=${keyword},page=${page.number - 1})}">上一页</a>
            <span th:if="${page.number == 0}">上一页</span>
        </li>
        <li th:each="i : ${#numbers.sequence(0, page.totalPages - 1)}" th:class="${i == page.number} ? active">
            <a th:if="${i != page.number}" th:href="@{/search(keyword=${keyword},page=${i})}" th:text="${i + 1}"></a>
            <span th:if="${i == page.number}" th:text="${i + 1}"></span>
        </li>
        <li th:class="${page.number == page.totalPages - 1} ? disabled">
            <a th:if="${page.number != page.totalPages - 1}" th:href="@{/search(keyword=${keyword},page=${page.number + 1})}">下一页</a>
            <span th:if="${page.number == page.totalPages - 1}">下一页</span>
        </li>
        <li th:class="${page.number == page.totalPages - 1} ? disabled">
            <a th:if="${page.number != page.totalPages - 1}" th:href="@{/search(keyword=${keyword},page=${page.totalPages - 1})}">末页</a>
            <span th:if="${page.number == page.totalPages - 1}">末页</span>
        </li>
    </ul>
</div>

在上面的代码中，我们首先定义了一个搜索表单，用户可以在表单中输入关键词进行搜索。接着，我们使用Thymeleaf的`th:each`指令遍历查询结果，并使用HTML表格进行展示。最后，我们使用Thymeleaf的`th:class`指令和Spring Data的`Page`对象属性来生成分页导航。

需要注意的是，上面的代码中使用了Spring Data提供的分页对象`Page`，该对象包含了当前页码、总页数、总记录数等属性，可以帮助我们实现分页导航。同时，我们还需要在后端实现相应的分页查询方法，将查询结果和分页对象传递给前端进行展示。