如何在Thymeleaf中按日期分组展示Transaction交易数据？

方案一：后端提前分组（推荐，性能更优） #

这种方式在Java层完成交易的日期分组，前端只负责渲染分组后的数据，逻辑更清晰，适合数据量较大的场景。

步骤1：确保Transaction实体的日期字段 #

假设你的Transaction实体有一个存储交易日期的字段，推荐用LocalDate（避免时区和时间部分干扰）：

public class Transaction {
    private Long id;
    private LocalDate transactionDate; // 交易日期，仅存日期部分
    private BigDecimal amount;
    private String description;
    // 其他字段、getter/setter
}

步骤2：后端实现分组逻辑 #

在服务层或控制器中，将交易列表按日期分组为Map<LocalDate, List<Transaction>>：

// 服务层方法示例
public Map<LocalDate, List<Transaction>> getGroupedTransactionsByUser(Long userId) {
    List<Transaction> allTransactions = transactionRepository.findByUserId(userId);
    // 先按日期倒序排序，再分组
    return allTransactions.stream()
            .sorted(Comparator.comparing(Transaction::getTransactionDate).reversed())
            .collect(Collectors.groupingBy(Transaction::getTransactionDate));
}

// 控制器传参
@GetMapping("/transactions")
public String showTransactions(Model model, @RequestParam Long userId) {
    Map<LocalDate, List<Transaction>> groupedTransactions = transactionService.getGroupedTransactionsByUser(userId);
    model.addAttribute("groupedTransactions", groupedTransactions);
    return "transactions";
}

步骤3：Thymeleaf渲染分组数据 #

在页面中遍历分组后的Map，先渲染日期标题，再遍历该日期下的所有交易：

<div th:each="entry : ${groupedTransactions}">
    <!-- 渲染日期标题 -->
    <h3 th:text="${#temporals.format(entry.key, 'yyyy/MM/dd')}"></h3>
    <!-- 渲染该日期下的交易列表 -->
    <div class="transaction-list">
        <div th:each="transaction : ${entry.value}" class="transaction-item">
            <span th:text="${transaction.description}"></span>
            <span th:text="${#numbers.formatCurrency(transaction.amount)}"></span>
        </div>
    </div>
</div>

方案二：前端Thymeleaf直接分组（适合小数据量） #

如果不想修改后端逻辑，可以在Thymeleaf中直接通过判断相邻交易的日期来实现分组，前提是后端先把交易按日期排序好。

步骤1：后端确保交易按日期排序 #

控制器中传入的交易列表必须是按日期排序的：

@GetMapping("/transactions")
public String showTransactions(Model model, @RequestParam Long userId) {
    List<Transaction> transactions = transactionRepository.findByUserIdOrderByTransactionDateDesc(userId);
    model.addAttribute("transactions", transactions);
    return "transactions";
}

步骤2：Thymeleaf页面实现分组渲染 #

通过th:with定义变量存储上一个交易的日期，遍历交易时判断当前日期是否与上一个相同，不同则渲染日期标题：

<div th:with="prevDate = ''">
    <div th:each="transaction, stat : ${transactions}">
        <!-- 获取当前交易的日期字符串（统一格式） -->
        <th:block th:with="currentDate = ${#temporals.format(transaction.transactionDate, 'yyyy/MM/dd')}">
            <!-- 仅当当前日期与上一个不同时，渲染日期标题 -->
            <h3 th:if="${currentDate != prevDate}" th:text="${currentDate}"></h3>
            <!-- 更新prevDate为当前日期 -->
            <th:block th:with="prevDate = ${currentDate}"></th:block>
        </th:block>
        
        <!-- 渲染交易详情 -->
        <div class="transaction-item">
            <span th:text="${transaction.description}"></span>
            <span th:text="${#numbers.formatCurrency(transaction.amount)}"></span>
        </div>
    </div>
</div>

注意事项 #

• 无论哪种方案，必须先对交易按日期排序，否则分组后的日期顺序会混乱。
• 如果你的交易日期是Date类型，建议先转换为LocalDate（通过date.toInstant().atZone(ZoneId.systemDefault()).toLocalDate()），避免时间部分（时分秒）导致同一日期的交易被分到不同组。
• 数据量大时优先选择方案一，减少前端页面的逻辑计算，提升渲染效率。

内容的提问来源于stack exchange，提问作者Frosty Nah