如何使用Thymeleaf仅迭代指定数量元素 无需后端返回截断列表

你可以直接在Thymeleaf渲染环节截断要展示的列表，不会影响原有的全量${users}数据，CSV下载逻辑可以照常使用完整列表，无需修改后端逻辑。

首先注意你现有代码有个小笔误：第二列的取值写的是${alert.getUserName()}，应该是对应循环变量${user.getUserName()}。

方案1：Thymeleaf侧截断循环集合（最推荐） #

直接在th:each遍历的时候截取前10条，不足10条时全量展示：

<table class="table table-bordered table-striped">
    <thead class="thead-dark">
    <tr>
        <th>Id</th>
        <th>Name</th>
    </tr>
    </thead>
    <tbody>
    <!-- 集合长度超过10就取前10条，否则全量遍历 -->
    <tr th:each="user : ${users.size() > 10 ? users.subList(0,10) : users}">
        <td th:text="${user.getUserId()}" />
        <td th:text="${user.getUserName()}" />
    </tr>
    </tbody>
</table>

这个方案的优势是不会生成多余的DOM节点，页面性能更好，全量的${users}数据依然完整保留，你做CSV导出的时候可以正常调用全量数据。

方案2：CSS限制展示行数（适合后续需要动态切换展示条数的场景） #

如果你后续可能要做「显示更多/显示全部」的交互，也可以保留全量DOM渲染，用CSS限制最多展示10行：

<style>
.table tbody tr:nth-child(n+11) {
    display: none;
}
</style>

原有表格代码不需要修改，该样式会自动隐藏第11行及之后的行，需要展示全部的时候动态移除该样式即可。

内容的提问来源于stack exchange，提问作者Dean Taler