Thymeleaf中基于动态列表数据自动分页生成content-page的技术问询

1. 确定 content-page 的生成次数 #

要生成多少个 content-page，核心是先算出总页数，推荐后端提前计算好传到前端，避免前端逻辑冗余：

• 后端逻辑（按条目数分页为例）：

  // 定义每页显示的条目数
  int pageSize = 5;
  List<String> dataToDisplay = ...; // 业务数据源
  int totalItems = dataToDisplay.size();
  // 向上取整计算总页数
  int totalPages = (totalItems + pageSize - 1) / pageSize;
  // 把分页参数传到前端
  model.addAttribute("totalPages", totalPages);
  model.addAttribute("dataToDisplay", dataToDisplay);
  model.addAttribute("pageSize", pageSize);
  

• 前端用 th:each 循环生成 content-page：

  <!-- 按总页数循环生成对应数量的content-page -->
  <div th:each="page, pageStat : ${#numbers.sequence(1, totalPages)}">
    <div th:replace="fragments/content-page :: content-page"></div>
  </div>
  

如果是按字符数分页，后端需先把数据拆分成符合字符限制的分页列表（参考第三个问题），直接用分页后的列表长度作为总页数即可。

2. 关联列表与分页，跟踪索引 #

每个 content-page 需要渲染对应页的列表数据，关键是根据当前页的位置，计算该页数据的起始/结束索引：

• 在 content-page 片段中，通过循环的 pageStat.index（从0开始）计算索引区间：

  <!-- content-page 片段中的列表渲染部分 -->
  <ul>
    <!-- 计算当前页的起始、结束索引，避免越界 -->
    <th:block th:with="startIndex = ${pageStat.index * pageSize},
                      endIndex = ${T(java.lang.Math).min(startIndex + pageSize, dataToDisplay.size())}">
      <!-- 迭代当前页的子列表 -->
      <li th:each="item, itemStat : ${dataToDisplay.subList(startIndex, endIndex)}"
          th:text="${item}"></li>
    </th:block>
  </ul>
  

用 th:block 封装变量计算不会生成多余DOM；subList 是左闭右开区间，通过 Math.min 处理最后一页的边界，防止索引越界。

3. 按字符数分页处理换行问题 #

按字符数分页的核心是后端提前拆分数据，避免前端截断内容或破坏原有换行：

后端拆分逻辑（示例） #

写一个工具方法，把原列表拆分成符合字符限制的分页列表，尽量不截断单词，同时保留原字符串的换行：

public static List<List<String>> splitByCharLimit(List<String> originalData, int charLimitPerPage) {
    List<List<String>> paginatedData = new ArrayList<>();
    List<String> currentPage = new ArrayList<>();
    int currentCharCount = 0;

    for (String item : originalData) {
        // 处理单个字符串超过字符限制的情况：按字符拆分（或按空格拆分避免截断单词）
        if (item.length() > charLimitPerPage) {
            // 按字符数拆分，保留原有换行
            String[] parts = item.split("(?<=\\G.{" + charLimitPerPage + "})");
            for (String part : parts) {
                if (currentCharCount + part.length() > charLimitPerPage) {
                    paginatedData.add(currentPage);
                    currentPage = new ArrayList<>();
                    currentCharCount = 0;
                }
                currentPage.add(part);
                currentCharCount += part.length();
            }
        } else {
            // 当前条目加入后超过限制则新建一页
            if (currentCharCount + item.length() > charLimitPerPage) {
                paginatedData.add(currentPage);
                currentPage = new ArrayList<>();
                currentCharCount = 0;
            }
            currentPage.add(item);
            currentCharCount += item.length();
        }
    }
    // 加入最后一页数据
    if (!currentPage.isEmpty()) {
        paginatedData.add(currentPage);
    }
    return paginatedData;
}

将拆分后的分页数据传到前端：

int charLimit = 500; // 每页字符限制
List<List<String>> paginatedData = splitByCharLimit(dataToDisplay, charLimit);
model.addAttribute("paginatedData", paginatedData);

前端渲染 #

直接循环分页后的列表，用 th:utext 保留原有的换行符（如需显示换行）：

<div th:each="pageData, pageStat : ${paginatedData}">
    <div th:replace="fragments/content-page :: content-page"></div>
</div>

<!-- content-page 片段中的列表 -->
<ul>
    <li th:each="item : ${pageData}" th:utext="${item}"></li>
</ul>

如果不需要保留原换行，用 th:text 即可；若要把换行转为 <br>，可在后端替换 \n 为 <br>，或前端用 #strings.replace(${item}, '\n', '<br>') 处理。

内容的提问来源于stack exchange，提问作者John P