基于XSLT2/XSLT3为XML交易数据添加分页功能的技术请求

1. 调整XSLT输出结构 #

在你现有生成HTML表格的XSLT代码基础上，修改输出结构以配合前端分页逻辑：

• 给表格外层添加带ID的容器，方便JS定位操作
• 保留原有排序逻辑，生成所有表格行，但默认隐藏除第一页外的内容
• 在表格下方添加分页控件的容器

示例XSLT核心片段：

<xsl:template match="/">
  <html>
    <head>
      <style>
        .transaction-table { width: 100%; border-collapse: collapse; }
        .transaction-table th, .transaction-table td { padding: 8px; text-align: left; border-bottom: 1px solid #ddd; }
        .transaction-table tr { display: none; }
        .transaction-table tr.active { display: table-row; }
        #pagination-controls { margin-top: 10px; text-align: center; }
        .page-btn { padding: 5px 10px; margin: 0 2px; cursor: pointer; border: 1px solid #ddd; }
        .page-btn.active { background-color: #007bff; color: white; border-color: #007bff; }
        /* 移动端适配样式 */
        @media (max-width: 768px) {
          .transaction-table thead { display: none; }
          .transaction-table tr { display: block; margin-bottom: 12px; border: 1px solid #ddd; }
          .transaction-table td { display: block; text-align: right; padding-left: 50%; position: relative; }
          .transaction-table td::before { 
            content: attr(data-label); 
            position: absolute; 
            left: 0; 
            padding-left: 8px; 
            font-weight: bold; 
            text-align: left; 
          }
        }
      </style>
    </head>
    <body>
      <div id="table-wrap">
        <table class="transaction-table">
          <thead>
            <tr>
              <!-- 替换为你原有的表头字段 -->
              <th>交易ID</th>
              <th>交易日期</th>
              <th>交易金额</th>
            </tr>
          </thead>
          <tbody>
            <!-- 保留你原有的排序后数据遍历逻辑，给每行加data-index记录位置 -->
            <xsl:for-each select="sorted-transactions/transaction">
              <tr data-index="{position()}">
                <td data-label="交易ID"><xsl:value-of select="id"/></td>
                <td data-label="交易日期"><xsl:value-of select="date"/></td>
                <td data-label="交易金额"><xsl:value-of select="amount"/></td>
              </tr>
            </xsl:for-each>
          </tbody>
        </table>
        <div id="pagination-controls"></div>
      </div>
      
      <script>
        // 分页配置参数，可按需修改
        const rowsPerPage = 10;
        const table = document.querySelector('.transaction-table');
        const rows = Array.from(table.querySelectorAll('tbody tr'));
        const paginationBox = document.getElementById('pagination-controls');
        const totalPages = Math.ceil(rows.length / rowsPerPage);

        // 初始化分页控件
        function renderPagination() {
          for (let i = 1; i <= totalPages; i++) {
            const btn = document.createElement('button');
            btn.className = 'page-btn';
            btn.textContent = i;
            btn.onclick = () => switchPage(i);
            paginationBox.appendChild(btn);
          }
          // 默认加载第一页
          switchPage(1);
        }

        // 切换分页逻辑
        function switchPage(pageNum) {
          // 隐藏所有行
          rows.forEach(row => row.classList.remove('active'));
          // 计算当前页显示的行范围
          const start = (pageNum - 1) * rowsPerPage;
          const end = start + rowsPerPage;
          // 显示当前页的行
          rows.slice(start, end).forEach(row => row.classList.add('active'));
          // 更新分页按钮激活状态
          document.querySelectorAll('.page-btn').forEach((btn, idx) => {
            btn.classList.toggle('active', idx + 1 === pageNum);
          });
          // 移动端自动滚动到表格顶部
          if (window.innerWidth <= 768) {
            table.scrollIntoView({ behavior: 'smooth' });
          }
        }

        // 页面加载完成后初始化分页
        window.addEventListener('load', renderPagination);
      </script>
    </body>
  </html>
</xsl:template>

2. 关键细节说明 #

• 移动适配：通过CSS媒体查询，在小屏幕设备上将表格转为卡片式布局，利用data-label属性让每个单元格显示对应表头，避免横向滚动
• 分页逻辑：JS负责计算总页数、生成分页按钮，点击按钮时切换显示对应范围的表格行，完全基于前端操作，无需重新调用XSLT转换
• 原有逻辑兼容：只需将你原有的排序后数据遍历代码替换到上述示例的tbody部分，原有XSLT排序逻辑完全保留

3. 进阶优化建议 #

如果数据量极大（上万条），纯前端分页会导致页面加载缓慢，可改为XSLT服务器端分页：

• 给XSLT传递current-page和rows-per-page参数
• 在XSLT中通过position()筛选出当前页需要显示的行，只生成对应内容，减少前端渲染压力

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