实现跨浏览器异步XML加载、XSL转换及分页导航功能求助

你的分页链接失效的核心原因是：缺少点击分页链接时传递当前页码参数、重新触发AJAX加载与XSL转换的逻辑，同时原JS代码没有完整实现跨浏览器的XSLT处理流程。下面是分步修复方案：

1. 完善JavaScript逻辑（file.js） #

需要实现：异步加载XML/XSL、跨浏览器XSL转换、分页链接点击事件绑定、页码参数传递。

// 全局变量整理
var xmlData = null;
var xslData = null;
var groupSize = 3; // 和XSL中的groupSize保持一致
var xmlUrl = "xml/persons.xml";
var xslUrl = "xml/pgd_tbl_style-en.xsl";
var targetDiv = document.getElementById("tbl_show");

// 初始化：先加载XML和XSL，完成后执行首次转换
function init() {
  // 并行加载XML和XSL
  Promise.all([loadXml(xmlUrl), loadXml(xslUrl)])
    .then(([xml, xsl]) => {
      xmlData = xml;
      xslData = xsl;
      // 默认显示第一页
      renderPage(1);
      // 绑定分页链接点击事件
      bindPaginationEvents();
    })
    .catch(err => console.error("加载资源失败:", err));
}

// 通用XML加载函数（支持跨浏览器）
function loadXml(url) {
  return new Promise((resolve, reject) => {
    let xhr = new XMLHttpRequest();
    xhr.open("GET", url, true);
    xhr.onreadystatechange = function() {
      if (xhr.readyState === 4) {
        if (xhr.status === 200) {
          resolve(xhr.responseXML);
        } else {
          reject(new Error(`加载${url}失败，状态码：${xhr.status}`));
        }
      }
    };
    xhr.send();
  });
}

// 根据页码渲染页面
function renderPage(pageNum) {
  if (!xmlData || !xslData) return;

  let resultHtml = "";
  // 跨浏览器XSL转换处理
  if (window.XSLTProcessor) {
    // Chrome/Firefox/Edge等现代浏览器
    let xsltProcessor = new XSLTProcessor();
    xsltProcessor.importStylesheet(xslData);
    // 传递当前页码参数给XSL
    xsltProcessor.setParameter(null, "crrntPag", pageNum);
    let resultDocument = xsltProcessor.transformToDocument(xmlData);
    resultHtml = new XMLSerializer().serializeToString(resultDocument);
  } else if (window.ActiveXObject) {
    // IE旧版本兼容
    // 需提前给XSL的param赋值，这里简化处理
    xslData.selectSingleNode("//xsl:param[@name='crrntPag']").text = pageNum;
    resultHtml = xmlData.transformNode(xslData);
  }

  // 将转换后的HTML插入目标容器
  targetDiv.innerHTML = resultHtml;
  // 重新绑定分页事件（因为HTML被重新生成了）
  bindPaginationEvents();
}

// 绑定分页链接点击事件
function bindPaginationEvents() {
  // 获取所有分页链接
  const paginationLinks = targetDiv.querySelectorAll(".pagination a");
  paginationLinks.forEach(link => {
    link.addEventListener("click", function(e) {
      e.preventDefault(); // 阻止默认跳转
      const pageNum = parseInt(this.dataset.page); // 获取链接上的页码数据
      if (!isNaN(pageNum)) {
        renderPage(pageNum);
      }
    });
  });
}

// 页面加载完成后初始化
window.onload = init;

2. 修正XSL样式表逻辑 #

需要确保XSL能正确接收crrntPag参数，计算当前页的显示范围，并生成带页码数据的分页链接：

<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
  <xsl:variable name="groupSize" select="3"/>
  <xsl:variable name="totRcrdNr" select="count(/persons/person)"/>
  <!-- 定义默认页码为1，避免参数未传递时出错 -->
  <xsl:param name="crrntPag" select="1"/>

  <!-- 计算总页数 -->
  <xsl:variable name="totalPages" select="ceiling($totRcrdNr div $groupSize)"/>
  <!-- 计算当前页的起始和结束位置 -->
  <xsl:variable name="startPos" select="($crrntPag - 1) * $groupSize + 1"/>
  <xsl:variable name="endPos" select="$crrntPag * $groupSize"/>

  <xsl:template match="/">
    <html>
      <body>
        <!-- 显示当前页的人员数据 -->
        <table border="1">
          <tr>
            <th>Surname</th>
            <th>Name</th>
            <th>Age</th>
            <th>Address</th>
            <th>City</th>
          </tr>
          <xsl:for-each select="/persons/person[position() >= $startPos and position() <= $endPos]">
            <tr>
              <td><xsl:value-of select="surname"/></td>
              <td><xsl:value-of select="name"/></td>
              <td><xsl:value-of select="age"/></td>
              <td><xsl:value-of select="address"/></td>
              <td><xsl:value-of select="city"/></td>
            </tr>
          </xsl:for-each>
        </table>

        <!-- 生成分页链接 -->
        <div class="pagination">
          <!-- First 链接 -->
          <a href="#" data-page="1">First</a>
          <!-- Prev 链接 -->
          <a href="#" data-page="{$crrntPag - 1}" xsl:if="$crrntPag = 1">disabled</xsl:if>Prev</a>
          
          <!-- 页码数字链接（可选） -->
          <xsl:for-each select="(//person)[position() &lt;= $totalPages]">
            <xsl:variable name="pageNum" select="position()"/>
            <a href="#" data-page="{$pageNum}" class="{if ($pageNum = $crrntPag) then 'active' else ''}">
              <xsl:value-of select="$pageNum"/>
            </a>
          </xsl:for-each>
          
          <!-- Next 链接 -->
          <a href="#" data-page="{$crrntPag + 1}" xsl:if="$crrntPag = $totalPages">disabled</xsl:if>Next</a>
          <!-- Last 链接 -->
          <a href="#" data-page="{$totalPages}">Last</a>
        </div>
      </body>
    </html>
  </xsl:template>
</xsl:stylesheet>

3. 优化HTML页面（index.html） #

确保JS在DOM加载完成后执行，避免找不到目标容器：

<html>
<head>
  <title>XML分页展示</title>
  <style>
    /* 可选：给分页链接添加样式 */
    .pagination a {
      margin: 0 5px;
      padding: 4px 8px;
      text-decoration: none;
      border: 1px solid #ccc;
    }
    .pagination a.active {
      background-color: #007bff;
      color: white;
      border-color: #007bff;
    }
    .pagination a[disabled] {
      opacity: 0.5;
      pointer-events: none;
    }
  </style>
</head>
<body>
  <div id="tbl_show"></div>
  <script type="text/javascript" src="js/file.js"></script>
</body>
</html>

关键修复点说明 #

• 参数传递：通过XSLTProcessor.setParameter（现代浏览器）或直接修改XSL参数（IE）将当前页码传递给XSL，确保每次转换都能计算正确的显示范围。
• 事件绑定：每次渲染页面后重新绑定分页链接的点击事件，因为转换后的HTML会替换原有内容，旧的事件监听会失效。
• 跨浏览器兼容：同时处理现代浏览器的XSLTProcessor和IE旧版本的transformNode方法。
• 分页链接逻辑：通过data-page属性存储页码，点击时读取该值并触发对应页面的渲染，避免页面跳转。

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