動態表格加序號：後端分頁邏輯與前端 Struts 標籤渲染實戰

場景描述

動態生成的車牌記錄表格，需求在前端顯示行號（序號）。資料來源未知筆數，採用分頁查詢。

後端：Service/DAO 層注入序號

int i = 0;
while (rs.next()) {
    i++;
    ProtectListPageVo vo = new ProtectListPageVo();
    vo.setNumberProtectList(i); // 序號隨迭代遞增
    vo.setHphm(rs.getString(1));
    vo.setHpzl(rs.getString(2));
    list.add(vo);
}

ProtectListPageVo 新增 int numberProtectList 欄位及 getter/setter。

前端：JSP 使用 Struts 標籤迭代渲染

<table border="1">
  <tr><td>序號</td><td>號牌號碼</td><td>號牌種類</td></tr>
  <logic:present name="list">
    <logic:iterate id="element" name="list">
      <tr>
        <td><logic:empty name="element" property="numberProtectList"></logic:empty>
            <bean:write name="element" property="numberProtectList"/></td>
        <td><logic:empty name="element" property="hphm"></logic:empty>
            <bean:write name="element" property="hphm"/></td>
        <td><logic:empty name="element" property="hpzl"></logic:empty>
            <bean:write name="element" property="hpzl"/></td>
      </tr>
    </logic:iterate>
  </logic:present>
</table>

<logic:empty> 防御空值，<bean:write> 輸出屬性值。

渲染效果

分頁考量

若需跨頁連續序號，需在查詢時傳入 pageNo、pageSize，計算 base = (pageNo-1)*pageSize，後端迭代時 i = base + 1 起算。

現代化替代方案

• 前端框架：Vue/React 直接 v-for="(item, index)" 顯示 index+1。
• CSS 計數器：tbody { counter-reset: row; } tr::before { counter-increment: row; content: counter(row); } 無需後端欄位。
• DataTables 等元件內建行號欄位。