移动端XSLT实现XML数据转置分页（每页3条记录）

第一步：拆分XSLT职责，保留纯转置逻辑 #

把分页逻辑从XSLT中完全剥离，只保留能正确转置数据的模板，转置后输出带统一类名的记录容器，方便后续JS抓取处理。这样从根源上避免模板冲突问题。

示例核心XSLT代码：

<xsl:template match="/">
  <!-- 转置结果容器 -->
  <div class="transposed-list">
    <xsl:apply-templates select="your-data-root/record" mode="transpose"/>
  </div>
  <!-- 分页控件占位 -->
  <div class="page-controls"></div>
</xsl:template>

<xsl:template match="record" mode="transpose">
  <!-- 每条转置记录的独立容器 -->
  <div class="transposed-item">
    <p><strong>姓名:</strong> <xsl:value-of select="name"/></p>
    <p><strong>年龄:</strong> <xsl:value-of select="age"/></p>
    <p><strong>部门:</strong> <xsl:value-of select="department"/></p>
    <!-- 其他需要转置的字段 -->
  </div>
</xsl:template>

第二步：原生JS实现分页控制 #

用JS处理分页逻辑，每页固定显示3条转置后的记录，核心逻辑包括计算总页数、生成分页按钮、切换页码时控制记录的显示/隐藏：

示例JS代码：

document.addEventListener('DOMContentLoaded', function() {
  const allItems = document.querySelectorAll('.transposed-item');
  const itemsPerPage = 3;
  const totalPages = Math.ceil(allItems.length / itemsPerPage);
  const controlsWrap = document.querySelector('.page-controls');

  // 默认显示第一页
  renderPage(1);

  // 生成分页按钮
  for (let i = 1; i <= totalPages; i++) {
    const pageBtn = document.createElement('button');
    pageBtn.textContent = i;
    pageBtn.addEventListener('click', () => renderPage(i));
    controlsWrap.appendChild(pageBtn);
  }

  function renderPage(pageNum) {
    // 隐藏所有记录
    allItems.forEach(item => item.style.display = 'none');
    // 计算当前页的记录范围
    const startIdx = (pageNum - 1) * itemsPerPage;
    const endIdx = startIdx + itemsPerPage;
    // 显示当前页的记录
    for (let i = startIdx; i < endIdx && i < allItems.length; i++) {
      allItems[i].style.display = 'block';
    }
    // 高亮当前页码按钮（可选优化）
    document.querySelectorAll('.page-controls button').forEach(btn => {
      btn.classList.remove('active');
      if (parseInt(btn.textContent) === pageNum) btn.classList.add('active');
    });
  }
});

第三步：冲突根源解决说明 #

之前加入分页模板后格式混乱，本质是XSLT的模板匹配优先级冲突——分页模板覆盖了转置模板的节点匹配规则。现在将转置（数据结构转换）和分页（前端展示控制）完全拆分，XSLT只负责输出转置后的结构化DOM，JS负责控制显示逻辑，两者职责清晰，不会再出现逻辑冲突。

移动端适配小细节 #

• 给.transposed-item设置合适的内边距、边框，保证单条记录在移动端的可读性
• 分页按钮用弹性布局，适配不同屏幕宽度，避免按钮换行混乱
• 可额外添加「上一页/下一页」按钮，提升移动端操作便捷性

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