Question

（迫切）我需要一些（跨浏览器）异步xml加载，转换和分页，并通过.html页面通过某些.xsl样式表进行显示。

更确切地说，我需要的是prev next next first html链接功能正常工作！我设法创建了以下内容：

persons.xml

<persons> <person> <surname>Smith</surname> <name>John</name> <age>44</age> <address>1 Fiction Street</address> <city>SouthLand</city> </person> <person> <surname>Hardcastle</surname> <name>Belinda</name> <age>37</age> <address>3rd. Rose Road</address> <city>DownTown</city> </person> <person> <surname>Elliot</surname> <name>George</name> <age>40</age> <address>21 Know Avenue</address> <city>Brownville</city> </person> <person> <surname>Jahore</surname> <name>Janice</name> <age>29</age> <address>14 Dragon Terrace</address> <city>Imagnry Town</city> </person> <person> <surname>Johnson</surname> <name>Tracey</name> <age>32</age> <address>11 Home Street</address> <city>Flowerville</city> </person> <person> <surname>Jalopy</surname> <name>Janus</name> <age>39</age> <address>63 Long Road</address> <city>Bigtown</city> </person> <person> <surname>Arthur</surname> <name>Bertrand</name> <age>45</age> <address>23 Sunrise Blvrd.</address> <city>MoonTown</city> </person> <person> <surname>Robert</surname> <name>Adolphe</name> <age>28</age> <address>32 East Lane</address> <city>Uptown</city> </person> <person> <surname>Eileen</surname> <name>Steward</name> <age>52</age> <address>12 Downsouth Blvrd.</address> <city>Albertville</city> </person> <person> <surname>Elizabeth</surname> <name>Parker</name> <age>62</age> <address>21 Jump Street</address> <city>San Thomas</city> </person> <person> <surname>Don</surname> <name>Stevens</name> <age>54</age> <address>10th Evergreen Terrace</address> <city>EastBourne City</city> </person> </persons>
分页显示样式表

     <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)"/> 
     <xsl:param name="crrntPag" /> <!-- select="1" -->
      <xsl:template match="/persons">
      <html>
       <body>
        <h2 style="margin-left:67px">some persons listing</h2>    
        <table id="tbl" border="1" style="border-collapse:collapse;width:42%">
        <tr bgcolor="#b0d2b8"> 
          <th>Surname</th> <th>Name</th> <th>Age</th> <th>Address</th> 
           <th>City</th>
        </tr>
         <!-- select every first item in a group -->
        <xsl:apply-templates select="person[position() mod $groupSize = 1]"/> 

        <tr class="tln"> 
         <td colspan="3">
         <xsl:if test="$groupSize * ($crrntPag - 1)&gt;$crrntPag"> 
         <span class="bpgn" style="margin-left:95px">  <!-- PREVIOUS and FIRST-->
         <a href="#" onclick=" ">&#171; </a>  <!-- << -->
         <a href="#" onclick=" ">&#8249; </a> <!-- < -->      
        </span>     
       </xsl:if> 
       </td>
      <td colspan="1">  
     <xsl:if test="$crrntPag * $groupSize &lt;=$totRcrdNr">
      <span class="bpgn" style="margin-left:16px">    <!-- NEXT and LAST-->
       <a href=" " onclick="init({$crrntPag + 1})">&#8250; </a> <!-- > -->
       <a href="#" onclick=" ">&#187; </a>  <!-- >> -->      
      </span>     
     </xsl:if>
     </td>   
     <td>pag: <xsl:value-of select="$crrntPag"/>/<xsl:value-of select="$totRcrdNr"/> </td>
     </tr>
     </table>
     </body>
     </html>
     </xsl:template>

    <xsl:template match="person">
    <xsl:if test="position()=$crrntPag">
    <!-- list self and following siblings within this group -->
    <xsl:for-each select=". | following-sibling::person[position() &lt; $groupSize]"> 
    <tr>  
    <xsl:for-each select="child::*/child::text()"> 
        <td> <xsl:value-of select="."/> </td>
     </xsl:for-each>
    </tr> 
    </xsl:for-each> 
    </xsl:if>
    </xsl:template> 
    </xsl:stylesheet>

file.js-我通过其异步加载和显示该xml文件以及下一个上一个链接.html表边框的js脚本

 var xmlhttp = null, xslhttp = null, xmlRspn = null, xslRspn = null,
    xmlDetails = "xml/persn-en.xml",pass=0, pg,
    xslDetails = "xml/pgd_tbl_style-en.xsl", div_id = "tbl_show"; 

init(pg);

function init(pg)
 {
   pass++;  

  if(pass == 1) // that's somethng. temporary
    pg = 1

  sendRequest(xmlDetails, xslDetails,pg) 
}

function sendRequest(xmlURL, xslURL,pg)
 {
  xmlhttp = new XMLHttpRequest();   // first xmlHttpRequest for xml 
  if(xmlhttp)
  {
   xmlhttp.onreadystatechange =  function()
                 {
                  if(xmlhttp.readyState == 4 && xmlhttp.status == 200)
                  {  
                   xmlRspn = xmlhttp.responseXML;
                   doTrnsfrmGcko(div_id, xmlRspn, xslRspn,pg);
                  }
                 }    
   xmlhttp.open("get", xmlURL, true);
   xmlhttp.send("");
  }

  xslhttp = new XMLHttpRequest();   // second xmlHttpRequest for xsl
  if(xslhttp)
  {
   xslhttp.onreadystatechange = function()
                {
                 if(xslhttp.readyState == 4 && xslhttp.status == 200)
                 {
                  xslRspn = xslhttp.responseXML;          
                  doTrnsfrmGcko(div_id, xmlRspn, xslRspn,pg);
                 }
                }
   xslhttp.open("get", xslURL, true); 
   xslhttp.send("");
  }
 }

 function doTrnsfrmGcko(docElement, xmlDoc, xslDoc,pg) 
 {
  if(xmlDoc == null || xslDoc == null)
   return;
  else
  {
   var xsltProcessor = new XSLTProcessor();
   xsltProcessor.importStylesheet(xslDoc);
   xsltProcessor.setParameter(null,"crrntPag", pg); // stylesheet parameter passing over
   var fragment = xsltProcessor.transformToFragment(xmlDoc,document);
   document.getElementById(docElement).innerHTML = "";
   document.getElementById(docElement).appendChild(fragment);
  }
 }

index.html-非常简单的.html页面，其中所有内容都会发生。

  <html>
  <head>
   <script type="text/javascript" src="js/file.js"></script>
  </head>
  <body> 
   <!--<h3> List some people </h3> -->
   <div id="tbl_show"></div> 
  </body>
  </html>

好吧，现在，如果一个人可以从这里获取所有文件并将其放到他/她自己的计算机中，则会很快注意到，任何链接都没有任何功能！因此，在使这些链接正常工作时，我需要您的支持！第一上一页下一页最后一页有一个小提琴之类的例子来检查我的意思下一个上一个功能：

        https://jsfiddle.net/MrcaS48/2e9kq3v0

看，通过那里的链接正在工作！我只需要在这里完成同样的事情。

我的代码中做了一些小尝试，但是都错了..我认为，主要是因为应该通过ajax调用来获取这些链接工作。再次，你们帮我解决这个问题，因为我不知道该怎么做

非常感谢您

Answer 1

您在一个onclick处理程序（例如init({$crrntPag + 1})）中进行了正确的调用，但是如果您将带有a href="#"的HTML链接用作“按钮”以仅调用某些Javascript代码，确保在链接之后没有使用return false作为onclick处理程序中的最后一条语句：

<a href="#" onclick="init({$crrntPag + 1}); return false;">...</a>

使用带有input type="button"或button元素而不是a元素的简单按钮会更容易。

异步xml加载和html页面显示

1 个答案: