我(非常)需要一些(跨浏览器)异步 xml 加载、转换和分页显示，通过 .html 页面通过一些 .xsl 样式表进行显示。
更准确地说，我需要的是上一个下一个最后一个第一个 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)>$crrntPag">
<span class="bpgn" style="margin-left:95px"> <!-- PREVIOUS and FIRST-->
<a href="#" onclick=" ">« </a> <!-- << -->
<a href="#" onclick=" ">‹ </a> <!-- < -->
</span>
</xsl:if>
</td>
<td colspan="1">
<xsl:if test="$crrntPag * $groupSize <=$totRcrdNr">
<span class="bpgn" style="margin-left:16px"> <!-- NEXT and LAST-->
<a href=" " onclick="init({$crrntPag + 1})">› </a> <!-- > -->
<a href="#" onclick=" ">» </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() < $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>
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);
}
}
<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>
好吧，现在，如果一个人从这里获取所有文件并将其放入他/她自己的计算机上，很快就会发现这两个链接都没有任何功能! 因此，我需要您的支持才能使这些链接发挥作用!第一篇 上一篇 下一篇 最后一篇 有一些类似 fiddle 的例子可以用来检查我的意思 下一个上一个功能:
https://jsfiddle.net/MrcaS48/2e9kq3v0
看，通过那里的链接正在工作! 我只需要在这里完成同样的事情。
我的代码中有一些小的尝试，但都是错误的..我认为，主要是因为应该有ajax调用来获取这些链接 在职的。 再次，你们帮我解决这个问题，因为我不知道该怎么做
提前非常感谢
最佳答案
您在一个 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 元素的简单按钮会更容易。
关于javascript - 异步 xml 加载并在 html 中分页显示，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/56817210/