如何在Spring Boot中实现动态日期筛选表格？

我为父亲的业务开发了一个Spring Boot应用，已经完成了GoldLedger实体类、控制器、服务、仓库以及前端HTML表格的基础功能，现在需要实现基于用户选择（比如日期选择器）的表格数据动态筛选，作为初学者卡在了这最后一步，请求技术帮助。以下是我的相关代码：

实体类（GoldLedger） #

public class GoldLedger {
    @jakarta.persistence.Id
    @GeneratedValue(strategy = GenerationType.IDENTITY)
    private Long id;
    @DateTimeFormat(iso = ISO.DATE)
    private LocalDate pledgeddate;
    @Column(unique = true)
    private String billnum;
    private Long billamount;
    
    private String name;
    
    @DateTimeFormat(iso = ISO.DATE)
    private LocalDate returndate;
}

控制器（GoldLedgerController） #

@Controller
public class GoldLedgerController {

    @Autowired
    private GoldLedgerService goldLedgerService;

    @GetMapping("/goldledger")
    public String getAllGoldLedgerEntry(Model model,@Param("keyword") String keyword) {
        model.addAttribute("goldledgerall", goldLedgerService.getAllGoldLed(keyword));
        model.addAttribute("keyword",keyword);
        return "goldledger";
    }

    @RequestMapping(value = "/goldledger/findGoldDataById/", method = RequestMethod.GET)
    @ResponseBody
    public Optional<GoldLedger> findGoldDataById(Long id) {
        return goldLedgerService.findGoldData(id);
    }
    
    @RequestMapping(value = "/goldLedger/addToGoldLedger", method = { RequestMethod.PUT, RequestMethod.GET })
    public String addToLedger(GoldLedger goldLedger) {
        goldLedgerService.addToLedger(goldLedger);
        return "redirect:/newgoldbill";
    }
}

服务层（GoldLedgerService） #

@Service
public class GoldLedgerService {
@Autowired
private GoldLedgerRepository goldLedgerRepository;

public List<GoldLedger> getAllGoldLed(String keyword) {
    if(keyword != null) {
        return goldLedgerRepository.search(keyword);
    }
    else {
        return goldLedgerRepository.findAll();
    }
}

public void addToLedger(GoldLedger goldLedger) {
    goldLedgerRepository.save(goldLedger);
}

public Optional<GoldLedger> findGoldData(Long id) {
return goldLedgerRepository.findById(id);
}
}

仓库层（GoldLedgerRepository） #

public interface GoldLedgerRepository extends JpaRepository<GoldLedger, Long> {
    @Query("SELECT c FROM GoldLedger c WHERE CONCAT(c.billnum, ' ') LIKE %?1%")
    public List<GoldLedger> search(String Keyword);
}

前端HTML表格 #

<table class="table table-bordered border-dark table-striped table-hover my-3" id="table">
    <thead>
        <tr style="text-align: center;">
            <th scope="col">Bill Number</th>
            <th scope="col">Pledged Date</th>
            <th scope="col">Bill Amount</th>
            <th scope="col">Customer Name</th>
            <th scope="col">Return Date</th>
        </tr>
    </thead>
    <tbody>
        <tr th:each="goldledger:${goldledgerall}" th:style="${goldledger.onepercent}!= null? 'background-color:red'">
            <th scope="row" th:text="${goldledger.billnum}" style="text-align: center;"></th>
            <td th:text="${goldledger.pledgeddate}" nowrap></td>
            <td th:text="${goldledger.billamount}"></td>
            <td th:text="${goldledger.name}"></td>
            <td th:text="${goldledger.itemdescription}"></td>
            <td th:text="${goldledger.itemweight}"></td>
            <td th:text="${goldledger.returndate}" nowrap></td>
        </tr>
    </tbody>
</table>

下面分步骤实现基于日期选择器和关键词的组合筛选：

1. 前端添加筛选控件 #

在HTML表格上方添加筛选表单，包含关键词输入框、日期范围选择器：

<form th:action="@{/goldledger}" method="get" class="mb-3">
    <div class="row g-3">
        <div class="col-md-3">
            <label for="keyword" class="form-label">账单编号关键词</label>
            <input type="text" class="form-control" id="keyword" name="keyword" th:value="${keyword}" placeholder="输入账单编号">
        </div>
        <div class="col-md-3">
            <label for="startPledgedDate" class="form-label">质押起始日期</label>
            <input type="date" class="form-control" id="startPledgedDate" name="startPledgedDate" th:value="${startPledgedDate}">
        </div>
        <div class="col-md-3">
            <label for="endPledgedDate" class="form-label">质押结束日期</label>
            <input type="date" class="form-control" id="endPledgedDate" name="endPledgedDate" th:value="${endPledgedDate}">
        </div>
        <div class="col-md-3">
            <label for="startReturnDate" class="form-label">归还起始日期</label>
            <input type="date" class="form-control" id="startReturnDate" name="startReturnDate" th:value="${startReturnDate}">
        </div>
        <div class="col-md-3">
            <label for="endReturnDate" class="form-label">归还结束日期</label>
            <input type="date" class="form-control" id="endReturnDate" name="endReturnDate" th:value="${endReturnDate}">
        </div>
        <div class="col-md-2 align-self-end">
            <button type="submit" class="btn btn-primary">筛选</button>
            <a th:href="@{/goldledger}" class="btn btn-secondary ms-2">重置</a>
        </div>
    </div>
</form>

2. 修改控制器接收筛选参数 #

更新getAllGoldLedgerEntry方法，接收新增的日期参数并回显到前端：

@GetMapping("/goldledger")
public String getAllGoldLedgerEntry(Model model,
                                    @Param("keyword") String keyword,
                                    @Param("startPledgedDate") LocalDate startPledgedDate,
                                    @Param("endPledgedDate") LocalDate endPledgedDate,
                                    @Param("startReturnDate") LocalDate startReturnDate,
                                    @Param("endReturnDate") LocalDate endReturnDate) {
    List<GoldLedger> ledgerList = goldLedgerService.filterLedgers(keyword, startPledgedDate, endPledgedDate, startReturnDate, endReturnDate);
    model.addAttribute("goldledgerall", ledgerList);
    // 回显参数，保持筛选状态
    model.addAttribute("keyword", keyword);
    model.addAttribute("startPledgedDate", startPledgedDate);
    model.addAttribute("endPledgedDate", endPledgedDate);
    model.addAttribute("startReturnDate", startReturnDate);
    model.addAttribute("endReturnDate", endReturnDate);
    return "goldledger";
}

3. 服务层添加筛选逻辑 #

在GoldLedgerService中新增筛选方法，调用仓库层的查询：

public List<GoldLedger> filterLedgers(String keyword,
                                      LocalDate startPledgedDate,
                                      LocalDate endPledgedDate,
                                      LocalDate startReturnDate,
                                      LocalDate endReturnDate) {
    return goldLedgerRepository.filterLedgers(keyword, startPledgedDate, endPledgedDate, startReturnDate, endReturnDate);
}

4. 仓库层添加动态查询方法 #

使用@Query实现多条件动态查询，自动忽略空参数：

public interface GoldLedgerRepository extends JpaRepository<GoldLedger, Long> {
    @Query("SELECT c FROM GoldLedger c WHERE " +
           "(?1 IS NULL OR c.billnum LIKE %?1%) AND " +
           "(?2 IS NULL OR c.pledgeddate >= ?2) AND " +
           "(?3 IS NULL OR c.pledgeddate <= ?3) AND " +
           "(?4 IS NULL OR c.returndate >= ?4) AND " +
           "(?5 IS NULL OR c.returndate <= ?5)")
    List<GoldLedger> filterLedgers(String keyword,
                                   LocalDate startPledgedDate,
                                   LocalDate endPledgedDate,
                                   LocalDate startReturnDate,
                                   LocalDate endReturnDate);
}

5. 前端表格渲染 #

保持原有的表格Thymeleaf渲染逻辑即可，控制器会将筛选后的列表放入goldledgerall模型，表格会自动更新内容。

注意事项 #

• 原生type="date"输入框会适配浏览器自带的日期选择器，无需额外插件
• 空参数会被查询逻辑自动忽略，支持任意组合筛选
• 重置按钮通过跳转至无参数的/goldledger路径，恢复显示全部数据

内容的提问来源于stack exchange，提问作者M R